webpack 环境搭建
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/
