webpack2学习(二)

目录

• 在main.js中操作dom 修改页面内容
• 完善webpack配置文件
  • webpack最重要的功能 - 加载器(Loaders)
  • webpack的插件功能
• 总结

webpack 最难理解的点是 ‘编译’这个概念

在main.js中操作dom 修改页面内容

eg

document.getElementById('app').innerHTML = 'hello xxx'

热更新：在工程启动时， 保存main.js, 会发现页面自动更新了，这是webpack-web-server的热更新功能(通过建立一个Websocket连接来实现响应代码的修改)

完善webpack配置文件

webpack最重要的功能 - 加载器(Loaders)

webpack中每个文件都是一个模块，不同的模块，需要不同的加载器来加载， 所以就需要安装不同的加载器对各种后缀名的文件进行处理。
eg： css样式
安装 style-loader css-loader

yarn add css-loader --save-dev
yarn add style-loader --save-dev

安装后， 在webpack.config.js中配置loader

在module对象的rules属性中去指定一系列的loaders，
每个loader必须包含test和use两个选项。

// 解释： 当webpack编译过程中遇到require() 或import语句导入一个后缀为.css的文件时，现将它通过css-loader转换，再通过style-loader转换，然后继续打包
// (use选项的值可以是数组也可是字符串，如果是数组编译顺序为从下至上)
module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }

新建文件style.css，随便写几个样式
将style.css文件引入到main.js中

// 新建文件 打开文件 (当然你也可以手动打开)
touch style.css
open style.css

// style.css
#app {
    font-size: 30px;
    color: lightblue;
}

//main.js
import './style.css'

重新执行yarn run dev

页面会加载你写的样式

webpack的插件功能

插件功能强大 并且可以定制

这里以 extract-text-webpack-plugin的插件为例

• 作用: 把散落在各地的css提取出来，并生成一个main.css文件，最终在index.html里通过link的形式加载它

安装

 yarn add extract-text-webpack-plugin --dev

改写配置

module: {
        rules: [
            {
                test: /.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'style-loader'
                })
            }
        ]
    },
    plugins: [
        //重命名提取后的css文件
        new ExtractTextPlugin("main.css")
    ]

在index.html中通过link添加main.css

    <link rel="stylesheet" type="text/css" href="/dist/main.css">

执行

yarn run dev

总结

webpack看似复杂，其实只不过是一个js配置文件
只要弄清楚4个概念：

• 入口 entry
• 出口 output
• 加载器 Loaders
• 插件 Plugins