webpack的配置
全局安装webpack webpack-cli webpack-dev-server
sudo npm i webpack webpack-cli webpack-dev-server -g
webpack 模块打包器 会根据entry入口文件来构建模块依赖图，最后在output文件中输出
webpack-dev-server 服务器插件，相当于webpack+apache启动一个web服务以后实时修改
安装完成以后构建一个webpack项目
//在你的系统文件夹下面创建一个新的文件夹并进入新建的目录创建相关子目录
mkdir webpack-course
cd webpack-course
mkdir src dist config
//git初始化整个目录
git init .
//生成package.json文件
npm init -y
//在子目录下面创建子文件
touch src/index.js dist/index.html
//查看子目录是否成功创建了文件
ls src
ls dist
在webpack4之前我们要对文件进行打包的时候webpack会先找到一个叫webpack.dev.js的文件，然后按照该文件的内容来进行项目打包，但是4以后，在以上文件创建好以后我们就可以直接运行webpack来对文件进行打包，只要我们的src/index.js和dist/index.html这两个文件对应存在，webpack就会找到src/index.js文件将它作为默认的入口来进行打包，运行webpack的命令如下：
//mode 是4里面独有的，它有两种环境，一个是开发环境(development)开发环境下运行会在dist下面生成一个main.js文件dist/main.js，一个是生产环境(production)生产环境运行以后会生产一个node_modules的文件；我们可以看见在控制台生成的文件大小的对比，我们会发现生产环境的打包体积很小，它只会打包我们用得到的东西
webpack --mode=development
webpack --mode=production
development
production
大小对比
之前说到4以前的版本会用到一个webpack.dev.js的文件，在4以后也还是要用它，因为要加载css图片等文件我们要依赖相关的loader 所以我们要创建一下这个文件
touch config/webpack.dev.js
删除之前的打包的文件,在webpack.dev.js里面重新构建我们项目的打包依赖图
rm dist/main.js src/index.js
现在项目结构如下：
项目结构
在webpack.dev.js 里面来写我们的配置，如下
const path = require("path");
module.exports = {
//入口文件
entry:{
//文件名 ： "文件路径"
main : "./src/main.js"
//如果有多个入口文件就需要采用[]将文件路径存起来
//main : [ "./src/main.js" , "./src/app.js"]
},
//打包环境 development 和 production 这里必须要配置不然会报错
mode:"development",
// 有且只有一个
output:{
//出口文件名 这里可以直接写死
filename : "bundle.js",
//出口文件名 这里也可以不写死 采用[name]来指定名字 这里会生成`对应入口文件名加上-bundle.js` 即 `main-bundle.js`
// filename : "[name]-bundle.js"
//path 采用nodejs的path模块
path : path.resolve(__dirname , "../dist")
}
}
配置完成以后，我们可以运行webpack4的命令，来打包我们的文件
//webpack执行config/webpack.dev.js文件的配置
webpack --config=config/webpack.dev.js
执行成功
在dist目录下生成一个bundle.js 的文件，改文件就是webpack里面的东西
bundle.js文件
以上就是我们webpack的打包的实现方式，那么我们怎么实现webpack的热更新呢，这时候我们就需要用到webpack-dev-server
webpack热更新
首先在项目下安装本地依赖
npm i webpack webpack-dev-server webpack-cli
然后分别在对应的文件里面做如下修改
//src/main.js
alert('hello word !!!')
//dist/index.html
<body>
<h1>hello word</h1>
</body>
//webpack.dev.js里面加入publicPath
output:{
//出口文件名 这里可以直接写死
filename : "bundle.js",
//出口文件名 这里也可以不写死 采用[name]来指定名字 这里会生成`对应入口文件名加上-bundle.js` 即 `main-bundle.js`
// filename : "[name]-bundle.js"
//path 采用nodejs的path模块
path : path.resolve(__dirname , "../dist"),
//表示公共路径是根路径
publicPath : '/'
}
在webpack.dev.js里面做如上配置以后我们可以直接在dist/index.js里面直接引入文件，如下
<body>
<h1>hello word</h1>
<script src="/bundle.js"></script>
<!-- 如果在publicPath里面配置的是"/ccc" 按下面方式引入 -->
<!-- <script src="/ccc/bundle.js"></script> -->
</body>
image.png
然后采用webpack-dev-server来启动项目，实时更新
webpack-dev-server --config=config/webpack.dev.js
然后打开浏览器localhost:8080以后
localhost:8080
事实上并没有直接打开dist/index.html那么我们需要配置一下本地服务器的contentbase，进入webpack.dev.js进行如下配置
//本地服务器配置
devServer:{
//默认进入dist文件夹下面运行index.html
contentBase : "dist"
}
重新启动
好了
然后我们就可以修改文件以后 可以看见实时更新的内容了
最后附上webpack.dev.js的内容
const path = require("path");
module.exports = {
//入口文件
entry:{
//文件名 ： "文件路径"
main : "./src/main.js"
//如果有多个入口文件就需要采用[]将文件路径存起来
//main : [ "./src/main.js" , "./src/app.js"]
},
//打包环境 development 和 production
mode:"development",
// 有且只有一个
output:{
//出口文件名 这里可以直接写死
filename : "bundle.js",
//出口文件名 这里也可以不写死 采用[name]来指定名字 这里会生成`对应入口文件名加上-bundle.js` 即 `main-bundle.js`
// filename : "[name]-bundle.js"
//path 采用nodejs的path模块
path : path.resolve(__dirname , "../dist"),
//表示公共路径是根路径
publicPath : '/'
},
//本地服务器配置
devServer:{
//默认进入dist文件夹下面运行index.html
contentBase : "dist"
}
}
网友评论