webpack的安装配置

一、安装webpack

全局安装：npm i webpack -g 安装到项目中：npm i webpack --save-dev（ 或者用cnpm、淘宝镜像安装） 在文件加下安装好后出现以下三个文件，其他文件是我后续建立的先忽略

二、打包

在这个文件下创建一个main.js文件。 进行打包：

webpack demo.js -o demo.bundle.js

三、webpack最基本配置文件（webpack.config.js）

const path = require('path') //向外暴露配置对象 module.exports={ entry: path.join(__dirname,'./src/main.js'), output: { path:path.join(__dirname,'./dist'), filename: "bundle.js" } }

四、安装 webpack-dev-server 自动打包编译

五、进一步优化配置

dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

可以实现自动打开指定端口的页面 html-webpack-plugin：从内存读取页面 path.join(__dirname,’./src/index.html’) dirname表示当前文件的路径

html-webpack-plugin该插件的好处是 可以自动帮我们把引入的js给添加上去，

配置css：

cnpm i style-loader css-loader -D

配置less：

cnpm i less-loader less -D

配置sass：

cnpm i sass-loader node-sass -D

配置图片：

cnpm i url-loader file-loader -D

module:{//配置所有第三方loader模块

rules:[ {test:/\.css$/,use:['style-loader','css-loader']}, {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, {test:/\.(jpg|gif|bmp|png|jpeg)$/,use:'url-loader?limit=1384942&name=[hash:8]-[name].[ext]'} ] }

六、注意事项

！ json文件里不能写注释 装包装到一半终止，先把装了一半的包手动删除，再重装，以防各种报错