使用webpack构建一个项目

1.使用 CommonJS 进行对 src/js 目录下的 js 代码进行模块化，所有模块都不产生全局变量，只通过 require 声明依赖，以及通过 module.exports 暴露模块接口。

// 灰尘类

// 依赖 global
var global = require('./global');  // 头部声明依赖

// 中间代码不用修改
var Dust = function(){
}
Dust.prototype.init = function(){
}
Dust.prototype.drawDust = function(){
}

module.exports = Dust;   // 最后暴露 Dust 类

js文件暴露模块

2.根目录增加 webpack.config.js 配置文件，使用 Webpack 对 js 进行打包, 入口文件为 src/js/index.js, 打包输出到 dist/bundle.js。

命令行进入项目目录，安装本地安装webpack, webpack-cli

npm install webpack --save-dev

npm install webpack-cli --save-dev

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 }

webpack.config.js

3.使用 css-loader 和 style-loader, 将 src/css/style.css 也加入打包。

安装css-loader和style-loader

npm i css-loader style-loader --save-dev

使用 extract-text-webpack-plugin 将 CSS 文件分离出来，构建后目录单独有一个 style.css 文件。

安装extract-text-webpack-plugin@next

npm i extract-text-webpack-plugin@next --save-dev

1 // 主入口
2 require('../css/style.css');

index.js

 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.config.js

注：由于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 }

webpack.config.js

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 }

webpack.config.js

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 }

webpack.config.js

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 }

package.json

 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 }

webpack.config.js

npm run build 运行 webpack 命令

npm run start 可以开启本地服务器

使用webpack构建一个项目

猜你喜欢