一、安装 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 文件里不能写注释
装包装到一半终止,先把装了一半的包手动删除,再重装,以防各种报错


标题:webpack的安装配置
作者:JaneChelle
地址:https://xiao.algerfan.cn/articles/2019/05/27/1563540529491.html