webpack的安装和使用

webpack

目前最流行的前端自动化工具，这里只说用法，不做过多概念介绍。按照如下步骤你一定会成功。

安装

webpack的安装，当前最新版本为4.20.2，安装该版本的话一不小心就会踩坑。

1. 安装node.js
   在git控制台输入

      $ node -v
   

   检查当前node版本，没有出现版本号要先安装node,

2. 安装npm
   在git控制台输入

      $ npm -v
   

   检查当前node版本，没有出现版本号要先安装npm

3. 全局安装webpack
   推荐安装4.0.0版本，亲测兼容性还可以

      $ npm i webpack@4.0.0 -g  
   

4. 在项目文件夹下安装webpack

      $ npm install webpack@4.0.0 --save-dev
   

5. 安装webpack-cli
   -g为全局安装，-D为安装到生产环境

      $ npm install webpack-cli -g
      $ npm install webpack-cli -D
   

6. 检查webpack是否安装成功

      $ webpack -v
   

如果出现版本号，证明你已经安装成功啦！
完成了以上安装证明您已经可以正式开工啦！

项目目录

-webpack-项目

• app
  • main.js
• package.json
• package-lock.json
• webpack.config.js

构建项目

1. app
   创建app文件夹，你的项目代码就放在app文件夹里。

2. main.js
   创建main.js文件，作为你项目的入口文件。

3. package.json
   要创建package.json，可以直接在控制台输入：

   $ npm init
   

   生成package.json，按照提示自由输入你想输入的内容，主要是自定义你创建的项目信息，然后回车就可以了，不知道填什么可以一直回车。
   文件主要包括以下内容：

   1) 项目名和版本号
   2) 命令：包含着script标签里，用npm run XXX 替换原有命令。 
   3) dependencies，devDependencies 项目运行所依赖的模块、项目开发所需要的模块
   

4. package-lock.json
   控制台输入：

   $ npm install
   

   生成package-lock.json，主要作用是锁定安装时的包版本号。上传到git以确保内次npm install项目的版本保持一致。

5. webpack.config.js
   是webpack的核心，我们在其中配置入口、输出文件、处理loader、加载插件等 。内容主要包括以下四点：
   1）entry：入口文件
   2）output：输出位置和文件
   3）module：配置处理各模块的 loader（loader用于对模块的源代码进行转换 ，包括 css 预处理 loader ，es6 编译 loader，图片处理 loader）
   4）label：webpack 各插件对象
   创建webpack.config.js文件，不知道内容怎么配置可以把下面代码直接粘进去。

   const path = require('path') 
   const webpack = require('webpack');
   
   module.exports = {
       //入口文件
       entry: "./app/main.js",
   	//还可以写成对象形式用于多个页面路径
       //输出文件
       output:{
       	path: path.resolve(__dirname,'dist'), //要写绝对路径
   		//但只指定一个输出配置
           filename:"bundle.js",
       },
       mode: 'development', // 设置mode
   //	module: {
   //    rules: [
   //        {
   //            test: /\.css$/,
   //            use: ['style-loader', 'css-loader']
   //        }
   //    ]
   //	},
   // 	plugins: [new webpack.HotModuleReplacementPlugin()],
   }
   

如果上述步骤都处理好了，我们就可以来运行webpack了

运行

$ webpack app/main.js dist/bundle.js 

这样实现打包，但是该weebpack版本会报错，但是依然能运行，要改成以下（4.0版本以上正确的命令）

$ webpack app/main.js -o dist/bundle.js    
$ webpack (-w)  //或者

查看webpack.config.js中output配置的输出文件在路径下是否存在，例如上面的命令会在dist文件夹下生成bundle.js，bundle.js是压缩和编译好的文件。

测试： 在dist文件夹下创建一个index.html文件引入bundle.js，运行index.html，这样就可以测试项目的内容是否得到有效压缩。

观察模式

每次修改都去重新打包会很麻烦，所以可以试试观察者模式，它帮我们解决了这个问题。

$ webpack --watch  //可以不退出命令行，就看到 webpack 自动重新编译修改后的模块

如何实时重新加载？

安装webpack-dev-server，webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。

npm install --save-dev webpack-dev-server

运行：

webpack-dev-server --open

或者在package.json里添加"start": “webpack-dev-server --open”，运行npm start

{
  "scripts": {
    "start": "webpack-dev-server --open",
  }
}

项目会在您默认的浏览器自动打开。

常见错误

1.没有设置模式选项

The 'mode' option has not been set，webpack will fallback to 'production' for this value.
 Set 'mode' option to 'development' or 'production' to enable defaults  

解决方案：在配置中提供 mode 选项

//webpack.config.js
module.exports = {
  mode: 'production'
};

//package.json
"dev": "webpack --mode development", 
"build": "webpack --mode production" 

//或者从 CLI 参数中传递：
webpack --mode=production

2. webpack.config.js里的路径错误

解决方案：采用__dirname 作为绝对路径

3.版本问题

版本问题是最常见的，
由于我安装的loader是npm install一键安装的，显示是以下版本

"css-loader": "^1.0.0",
"style-loader": "^0.23.1",
"webpack-dev-server": "^3.1.9"

错误提示要用 webpack@^4.0.0，我最开始用的是4.20.0，是不行的。所以要重新安装

 npm i webpack@4.0.0 -g  

结束

如果希望有其他运行命令的语句，可以自行配置在webpack.json的script里。

一个简单的webpack项目就搭建成功了，动手试试吧！