- 继上一篇文章后，我们已经对webpack的新的运行方式和配置方式有了大致了解。上篇文章的链接在这里：webpack 4.x的入门详解(强势踩坑)
- 但我们知道，一个前端的项目不止是如此简单的配置就能满足。首先我们还需要解决webpack打包对于不同文件的支持，那么我们就需要更加细化的配置文件去解决
webpack-dev-server工具使用
-
不管是学习还是编写项目的过程中，必然要不停的调试与打包项目，因此，为省去繁杂的打包时间。我们可以使用webpack-dev-server工具，使用
npm install webpack-dev-server -D安装，在package.json的script中配置。之后运行npm run dev来运行
配置命令行
-
运行成功后，系统提示我们现在我们项目已经跑在本地服务器的80端口，并且我们打包好的文件放在了根目录，所以我们把index.html文件的引入修改为
./bundle.js，然后打开80端口，点开src，就看到我们运行的项目主页了
现在预览文件在本地服务器的80端口
80端口下可以看到文件目录，点开src即可
- 我们也可以在package.json文件中写script脚本来更改设置 ，-- open 自动打开浏览器， -- contentBase src 默认打开为src目录， --hot 热启动，可以修改后页面自动刷新， --port 3000 将打开端口改为3000：
"dev": "webpack-dev-server --open --hot --contentBase src --port 3000 --mode development"
修改好后自动打开了3000端口，且为默认主页，打包成功
由于设置了热修改，因此当我们修改了js文件，页面自动刷新
好了，现在我们已经将打包服务配置好了，开始真正的配置之旅
css-loader与style-loader
现在我们做这样的操作，在被打包的入口文件引入我们CSS样式表，这个样式表的内容是将页面背景修改为全粉(世界上最好看的粉色)
使用import引入
页面因为有热修改立即报错
-
仔细读一下错误，它告诉我们，它识别不了这几行样式语句，需要我们使用一个适合的loader去处理这个文件。因此我们需要安装一个样式加载器和css加载器去帮助webpack加载这些文件，安装
npm install css-loader style-loader -
之后再配置文件，它的含义是，用正则匹配
.css后缀文件，然后使用loader加载器来替webpack来加载文件，注意书写顺序，加载器运行从右到左，也就是先用css加载器，再用样式加载器
module.exports = {
entry:'./src/main.js',
output:{
filename:'bundle.js'
},
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']},
]
}
}
-
现在再来运行项目
成功运行项目，也加载好了css样式
其余加载器的配置方法也不同，太晚了 睡觉！明天再更~~~2018.6.21
网友评论