1.使用 CommonJS 進行對 src/js 目錄下的 js 代碼進行模塊化，全部模塊都不產生全局變量，只經過 require 聲明依賴，以及經過 module.exports 暴露模塊接口。css
1 // 依賴 global 2 var global = require('./global'); // 頭部聲明依賴 3 4 // 中間代碼不用修改 5 var Dust = function(){ 6 } 7 Dust.prototype.init = function(){ 8 } 9 Dust.prototype.drawDust = function(){ 10 } 11 12 module.exports = Dust; // 最後暴露 Dust 類
2.根目錄增長 webpack.config.js 配置文件，使用 Webpack 對 js 進行打包, 入口文件爲 src/js/index.js, 打包輸出到 dist/bundle.js。html
命令行進入項目目錄，安裝本地安裝webpack, webpack-cliwebpack
npm install webpack --save-devweb
npm install webpack-cli --save-devnpm
1 var path = require('path'); 2 module.exports = { 3 entry: './src/js/index.js', //入口文件 4 output: { 5 filename: 'bundle.js', //輸出文件名 6 path: path.resolve(__dirname, './dist') //輸出目錄 7 } 8 }
3.使用 css-loader 和 style-loader, 將 src/css/style.css 也加入打包。json
安裝css-loader和style-loader服務器
npm i css-loader style-loader --save-devwebpack-dev-server
使用 extract-text-webpack-plugin 將 CSS 文件分離出來，構建後目錄單獨有一個 style.css 文件。ide
安裝extract-text-webpack-plugin@next模塊化
npm i extract-text-webpack-plugin@next --save-dev
1 // 主入口 2 require('../css/style.css');
1 var path = require('path'); 2 const webpack =require("webpack"); 3 const ExtractTextPlugin = require("extract-text-webpack-plugin"); 4 5 module.exports = { 6 entry: './src/js/index.js', //入口文件 7 output: { 8 filename: 'bundle.js', //輸出文件名 9 path: path.resolve(__dirname, './dist') //輸出目錄 10 }, 11 module: { 12 rules: [ 13 { 14 test: /\.css$/, 15 use: ExtractTextPlugin.extract({ 16 fallback: "style-loader", 17 use: "css-loader" 18 }) 19 } 20 ] 21 }, 22 plugins: [ 23 new ExtractTextPlugin("styles.css") 24 ] 25 }
注：因爲webpack版本是4.8.3，因此安裝的是extract-text-webpack-plugin@next
4.使用 html-webpack-plugin 將 src/index.html 做爲模板，刪掉index.html 裏面全部的 script 和 link 標籤，最終在 dist/ 目錄自動生成引用打包後文件的 index.html 。
安裝html-webpack-plugin
npm i html-webpack-plugin --save-dev
1 var path = require('path'); 2 const webpack =require("webpack"); 3 const ExtractTextPlugin = require("extract-text-webpack-plugin"); 4 const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 6 module.exports = { 7 entry: './src/js/index.js', //入口文件 8 output: { 9 filename: 'bundle.js', //輸出文件名 10 path: path.resolve(__dirname, './dist') //輸出目錄 11 }, 12 module: { 13 rules: [ 14 { 15 test: /\.css$/, 16 use: ExtractTextPlugin.extract({ 17 fallback: "style-loader", 18 use: "css-loader" 19 }) 20 } 21 ] 22 }, 23 plugins: [ 24 new ExtractTextPlugin("styles.css"), 25 new HtmlWebpackPlugin({ 26 template: 'src/index.html', 27 filename: 'index.html' 28 }) 29 ] 30 }
5.使用 copy-webpack-plugin 將 src/images 下的全部圖片複製到 dist/images 目錄。
安裝copy-webpack-plugin
npm i copy-webpack-plugin --save-dev
1 var path = require('path'); 2 const webpack =require("webpack"); 3 const ExtractTextPlugin = require("extract-text-webpack-plugin"); 4 const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 const CopyWebpackPlugin = require('copy-webpack-plugin'); 6 7 module.exports = { 8 entry: './src/js/index.js', //入口文件 9 output: { 10 filename: 'bundle.js', //輸出文件名 11 path: path.resolve(__dirname, './dist') //輸出目錄 12 }, 13 module: { 14 rules: [ 15 { 16 test: /\.css$/, 17 use: ExtractTextPlugin.extract({ 18 fallback: "style-loader", 19 use: "css-loader" 20 }) 21 } 22 ] 23 }, 24 plugins: [ 25 new ExtractTextPlugin("styles.css"), 26 new HtmlWebpackPlugin({ 27 template: 'src/index.html', 28 filename: 'index.html' 29 }), 30 new CopyWebpackPlugin([{ 31 from: 'src/images', 32 to: 'images' 33 }]) 34 ] 35 }
6.使用 clean-webpack-plugin， 每次構建以前刪掉 dist 目錄，避免上一次構建的影響。
安裝clean-webpack-plugin
npm i clean-webpack-plugin --save-dev
1 var path = require('path'); 2 const webpack =require("webpack"); 3 const ExtractTextPlugin = require("extract-text-webpack-plugin"); 4 const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 const CopyWebpackPlugin = require('copy-webpack-plugin'); 6 const CleanWebpackPlugin = require('clean-webpack-plugin') 7 8 module.exports = { 9 entry: './src/js/index.js', //入口文件 10 output: { 11 filename: 'bundle.js', //輸出文件名 12 path: path.resolve(__dirname, './dist') //輸出目錄 13 }, 14 module: { 15 rules: [ 16 { 17 test: /\.css$/, 18 use: ExtractTextPlugin.extract({ 19 fallback: "style-loader", 20 use: "css-loader" 21 }) 22 } 23 ] 24 }, 25 plugins: [ 26 new ExtractTextPlugin("styles.css"), 27 new HtmlWebpackPlugin({ 28 template: 'src/index.html', 29 filename: 'index.html' 30 }), 31 new CopyWebpackPlugin([{ 32 from: 'src/images', 33 to: 'images' 34 }]), 35 new CleanWebpackPlugin('dist') 36 ] 37 }
7.使用 webpack-dev-server 能夠開啓本地服務器，保存代碼後頁面自動刷新。
安裝webpack-dev-server
npm i webpack-dev-server --save-dev
使用 npm scripts 運行構建任務
1 { 2 "name": "project", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "dependencies": {}, 7 "devDependencies": { 8 "clean-webpack-plugin": "^0.1.19", 9 "copy-webpack-plugin": "^4.5.1", 10 "css-loader": "^0.28.11", 11 "extract-text-webpack-plugin": "^4.0.0-beta.0", 12 "html-webpack-plugin": "^3.2.0", 13 "style-loader": "^0.21.0", 14 "webpack": "^4.8.3", 15 "webpack-cli": "^2.1.4", 16 "webpack-dev-server": "^3.1.4" 17 }, 18 "scripts": { 19 "test": "echo \"Error: no test specified\" && exit 1", 20 "watch": "webpack --watch", 21 "build": "webpack", 22 "start": "webpack-dev-server --open" 23 }, 24 "keywords": [], 25 "author": "", 26 "license": "ISC" 27 }
1 var path = require('path'); 2 const webpack =require("webpack"); 3 const ExtractTextPlugin = require("extract-text-webpack-plugin"); 4 const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 const CopyWebpackPlugin = require('copy-webpack-plugin'); 6 const CleanWebpackPlugin = require('clean-webpack-plugin') 7 8 module.exports = { 9 entry: './src/js/index.js', //入口文件 10 output: { 11 filename: 'bundle.js', //輸出文件名 12 path: path.resolve(__dirname, './dist') //輸出目錄 13 }, 14 module: { 15 rules: [ 16 { 17 test: /\.css$/, 18 use: ExtractTextPlugin.extract({ 19 fallback: "style-loader", 20 use: "css-loader" 21 }) 22 } 23 ] 24 }, 25 plugins: [ 26 new ExtractTextPlugin("styles.css"), 27 new HtmlWebpackPlugin({ 28 template: 'src/index.html', 29 filename: 'index.html' 30 }), 31 new CopyWebpackPlugin([{ 32 from: 'src/images', 33 to: 'images' 34 }]), 35 new CleanWebpackPlugin('dist') 36 ], 37 devServer: { 38 contentBase: './dist' 39 } 40 }
npm run build 運行 webpack 命令
npm run start 能夠開啓本地服務器