Webpack环境搭建

一、安装node

1、node官网下载node并安装----node里面内置了npm所以用在安装npm了

2、命令行输入node -v查看node是否安装成功

二、全局安装webpack

1、命令行运行： npm install webpack -g

2、目的：全局使用webpack 命令

三、搭建项目

1、在项目根目录项安装npm install webpack --save-dev安装到项目依赖中

2、运行npm init -y 初始化项目

3、搭建项目目录，根目录创建src文件夹和dist文件夹，src里面放打包前的文件{images、js、css、index.html、mian.js}，dist中放打包后的文件。

4、根目录下创建webpack.config.js文件，用于打包配置：

-----------------------------------------------------------------------------------------------------------------

const path=require('path');//引进path模块

var htmlwebpackPlugin=require('html-webpack-plugin');//引进配置插件

module.exports={

mode:"development",//取消打包下黄色字体

entry:'./src/main.js',//项目入口

output:{//项目出口

path:path.resolve(__dirname,"dist"),//打包后文件路径

filename:"bundle.js"//打包后文件名称

//运行cnpm i html-webpack-plugin --save-dev安装到开发依赖

plugins:[ //插件

new htmlwebpackPlugin({

template:path.resolve(__dirname,'src/index.html'),//模板index.html路径

filename:'index.html'//打包后名称

})

//运行cnpm i style-loader css-loader --save-dev安装到开发依赖

module:{ //打包css文件

rules:[

{

test:/\.css$/,//文件为css

use:[//配置loader

"style-loader",

"css-loader"

]

}

]

}

5、执行webpack命令打包

四、实现webpack实时打包构建

1、由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。

2、运行cnpm i webpack-dev-server --save-dev安装到开发依赖

3、如果只有本地安装了webpack-dev-server ，打包时运行webpack-dev-server 会报错“不是内部会外部命令”。两种方法：

(1) 全局安装运行npm install webpack-dev-server -g ,能够使用在全局命令行运行webpack-dev-server 。

(2) 在package.json文件中的指令，来进行运行webpack-dev-server命令，在 scripts节点下新增"dev": "webpack-dev-server"指令，在命令行执行npm run dev 。

4、在打的包后发现没有生成打包文件，实际上打包文件是存放在内存的，根据提示输入Y，开启本地服务，在http://localhost:8080/ 中可以看到打包index执行后的效果。

五、安装插件

1、使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐用html-webpack-plugin插件配置启动页面.

2、运行cnpm i html-webpack-plugin --save-dev安装到开发依赖

3、webpack.config.js配置文件如下实例代码。

六、使用webpack打包css文件

1、运行cnpm i style-loader css-loader --save-dev

2、修改webpack.config.js这个配置文件：

详情使用webpack打包less、sass等类似请查看官网。https://www.webpackjs.com/