webpack 4.x的配置文件详解(继续踩坑)

• 继上一篇文章后，我们已经对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