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 能够开启本地服务器