Webpack项目搭建

1.创建一个项目

命令行进入项目目录，运行npm init命令，根据需要填写项目信息，入口文件为index.js, 其他略...

2. 在进入项目目录安装webpack和webpack-cli

npm install webpack webpack-cli --save-dev

3.编写项目代码

添加index.html、index.js、add-content.js

add-content.js有一个write方法向页面输出HelloWorld，内容如下：

1 function write() {
2   document.write('Hello World')
3 }
4 var app = {}
5 app.write = write
6 
7 export default app;

index.js引用add-content，并调用里面的方法，内容如下：

1 import app from './add-content'
2 app.write();

index.html内容如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <script src="./dist/bundle.js"></script>
 8   <title>HelloWorld</title>
 9 </head>
10 <body>
11   
12 </body>
13 </html>

注意，这里index.html引用的是 dist/bundle.js.

4. webpack 打包项目，命令如下

npx webpack --entry=./index.js --output-filename=bundle.js --mode=development

打包后项目目录下会增加，dist/bundle.js，此时浏览器运行index.html会到如下效果

说明：

a. webpack webpack-cli 是在项目目录下安装的无法运行webpack命令，所以使用npx

b. --entry是项目的入口文件，webpack默认入口文件为src/index.js，因此如果和默认一致可以不写该配置项

c. --output-filename 打包后的输出目录，webpack默认入口文件为dist/main.js，因此如果和默认一致可以不写该配置项

d. --mode 打包模式，有development、production、none三种模式

5. 每次打包都输入一长串命名太麻烦了，可以在package.json中进行配置

package.json中的script项添加build

1 "build": "webpack --entry=./index.js --output-filename=bundle.js --mode=development",

这样在命令行输入 npm run build就可以了.

6. 到目前为止已经可以开发了，不过开发过程中每次改动后都需要打包、刷新页面，有些低效，那么webpack-dev-server就很好地解决了这个问题。

安装：npm install webpack-dev-server --save-dev

package.json中的script项添加dev，设置host、port和publicPath

1 "dev": "webpack-dev-server --host=172.23.119.121 --port=9006 --publicPath=/dist",

这样在命令行输入 npm run dev就可以了.

7.参数太多可以放在单独的文件里面

在项目根目录下新建webpack.conifg.js文件，内容如下：

 1 module.exports = {
 2   entry: './src/index.js',
 3   output: {
 4     filename: 'bundle.js'
 5   },
 6   mode: 'development',
 7   devServer: {
 8     publicPath: '/dist/',
 9     hot: true,
10     compress: true,
11     host: '172.23.119.121',
12     port: 9006
13   }
14 }

同时修改package.json的scripts:

1 "build": "webpack",
2 "dev": "webpack-dev-server",

命令行输入 npm run dev即可。

webpack默认配置文件为根目录下的webpack.conifg.js，如果指定配置文件可以像下面这样写：

1 "build": "webpack --config=./build/config.js",
2 "dev": "webpack-dev-server --config=./build/config.js",

config后面的路径是相对于根目录的。

posted on 2020-01-13 16:29 橘生淮南_ 阅读(605) 评论(0) 收藏举报