webpack管理輸出

1.新建src/print.js,分別修改代碼以下,而後執行命令 npm run build ，這以後能夠在dist文件夾下看到，webpack 生成 print.bundle.js 和 app.bundle.js 文件，和在 index.html 文件中指定的文件名稱相對應。在瀏覽器中打開 index.html，查看點擊按鈕時會發生什麼。

print.js export default function printMe() { console.log('這段來自print.js!'); } index.js import _ from 'lodash'; import print from './print.js'; function component() { var element = document.createElement('div'); var btn = document.createElement('button'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); btn.innerHTML = '點擊!'; btn.onclick = print; element.appendChild(btn); return element; } document.body.appendChild(component()); const path = require('path'); webpack.config.js module.exports = { entry: {//入口文件
    app: './src/index.js', print: './src/print.js' }, output: {//輸出文件
    filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };

View Code

2.HtmlWebpackPlugin,若是更改了一個入口起點的名稱，或者添加了一個新的名稱，生成的包將被重命名在一個構建中，可是index.html文件仍然會引用舊的名字。 HtmlWebpackPlugin 會用新生成的 index.html 文件，把原來的替換掉，來解決這個問題。

　　首先安裝 npm install --save-dev html-webpack-plugin ，而後修改webpack.config.js以下，執行npm run build。

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: {//入口文件
    app: './src/index.js', print: './src/print.js' }, plugins:[ new HtmlWebpackPlugin({ title: 'Output Management' }) ], output: {//輸出文件
    filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };

3.清理 /dist 文件夾  npm install clean-webpack-plugin --save-dev clean-webpack-plugin在每次構建前清理 /dist 文件夾。webpack.config.js加入代碼以下，執行npm run build。

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');   const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry: { app: './src/index.js', print: './src/print.js' }, plugins: [       new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ title: 'Output Management' }) ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };

4.經過 manifest，webpack 可以對「你的模塊映射到輸出 bundle 的過程」保持追蹤，使用 WebpackManifestPlugin，能夠直接將數據提取到一個 json 文件，以供使用。

5.source map的使用，當 webpack 打包源代碼時，可能會很難追蹤到錯誤和警告在源代碼中的原始位置。JavaScript 提供了 source map 功能，將編譯後的代碼映射回原始源代碼。這裏使用 inline-source-map 選項，在webpack.config.js中配置。

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry: {//入口文件
    app: './src/index.js', print: './src/print.js' }, devtool: 'inline-source-map', plugins:[ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ title: 'Output Management' }) ], output: {//輸出文件
    filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };

6.能夠指示 webpack "watch" 依賴圖中的全部文件以進行更改。若是其中一個文件被更新，代碼將被從新編譯，沒必要手動運行整個構建。在pockage.json的scripts中添加 "watch": "webpack --watch" 。

在命令行中運行 npm run watch，就會看到 webpack 編譯代碼，然而卻不會退出命令行。這是由於 script 腳本還在觀察文件。可是修改過以後，須要手動刷新瀏覽器。

7.webpack-dev-server 提供了一個簡單的 web 服務器，而且可以實時從新加載(live reloading)。

首先安裝 npm install --save-dev webpack-dev-server ，修改webpack.config.js以下。

在pockage.json的scripts中添加  "start": "webpack-dev-server --open", 而後 npm start 。此時端口號爲8080。

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry: {//入口文件
    app: './src/index.js', print: './src/print.js' }, devtool: 'inline-source-map',  devServer: { contentBase: './dist' }, plugins:[ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ title: 'Output Management' }) ], output: {//輸出文件
    filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };

8.webpack-dev-middleware使用。webpack-dev-middleware 是一個容器(wrapper)，它能夠把 webpack 處理後的文件傳遞給一個服務器(server)。 webpack-dev-server 在內部使用了它，同時，它也能夠做爲一個單獨的包來使用，以便進行更多自定義設置來實現更多的需求。能夠在建立的serverjs中修改端口號 。

安裝 express 和 webpack-dev-middleware： npm install --save-dev express webpack-dev-middleware 。

webpack.config.js，output中添加 publicPath: '/' 

新建server.js,內容以下。

在pockage.json的scripts中添加 "server": "node server.js" 。執行  npm run server 。在瀏覽器剛纔打開的頁面中8080端口爲3000便可。

const express = require('express'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const app = express(); const config = require('./webpack.config.js'); const compiler = webpack(config); // Tell express to use the webpack-dev-middleware and use the webpack.config.js // configuration file as a base.
app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath })); // Serve the files on port 3000.
app.listen(3000, function () { console.log('Example app listening on port 3000!\n'); });

View Code