webpack资源管理

一、概况

①webpack不仅可以打包JavaScript模块，甚至它把网页开发中的一切资源的都可以当作模块来打包处理

②但是webpack本身不支持，它只是一个打包平台，其他资源，例如css、less、sass、img等资源需要结合插件来实现，这些插件在webpack里被称为loader（加载器）

二、webpack打包其他资源

1、打包 css模块

①安装依赖：style-loader  css-loader

// css-loader 的作用是把css文件转为JavaScript模块
// style-loader的作用是动态的创建style节点插入到head中

npm install --save-dev style-loader css-loader

②准备css文件，并加载

②配置（module部分）

// 该文件其实最终是要在node环境下执行的
const path = require('path')

// 导出一个具有特殊属性配置的对象
module.exports = {
    entry:'./src/main.js',/* 入口文件模块路径 */
    output:{
        path:path.join(__dirname,'./dist/'),/* 出口文件模块所属目录，必须是一个绝对路径 */
        filename:'bundle.js'/* 打包的结果文件名称 */
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    //注意：这里的顺序很重要，不要乱了顺序
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

③打包

npm run build

2、打包图片资源

①安装依赖：file-loader

npm install --save-dev file-loader

②准备图片和其他文件

③配置

// 该文件其实最终是要在node环境下执行的
const path = require('path')

// 导出一个具有特殊属性配置的对象
module.exports = {
    entry:'./src/main.js',/* 入口文件模块路径 */
    output:{
        path:path.join(__dirname,'./dist/'),/* 出口文件模块所属目录，必须是一个绝对路径 */
        filename:'bundle.js'/* 打包的结果文件名称 */
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    //注意：这里的顺序很重要，不要乱了顺序
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/(jpg|png|gif|svg)$/,
                use:[
                    'file-loader'
                ]
            }
        ]
    }
}

④问题：当运行打包指令，会发现图片已经打包成功，但是打开index.html会发现没有加载到图片，原因就是图片资源位于打包结果dist文件夹下，无法被访问到，解决方案就是把index.html放到dist目录里。但是dist是打包编译的结果，而非源码，所以把index.htm放到dist就不合适。而且，如果打包结果的文件名bundle.js一旦改变，则index.html里script引入也要手动修改。综合以上遇到的问题，可以使用一个插件html-web-plugin，解决上面两个问题

⑤安装依赖：html-webpack-plugin

npm install --save-dev html-webpack-plugin

⑥配置

// 该文件其实最终是要在node环境下执行的
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

// 导出一个具有特殊属性配置的对象
module.exports = {
    entry:'./src/main.js',/* 入口文件模块路径 */
    output:{
        path:path.join(__dirname,'./dist/'),/* 出口文件模块所属目录，必须是一个绝对路径 */
        filename:'bundle.js'/* 打包的结果文件名称 */
    },
    plugins:[
        // 该插件可以把index.html打包到bundle.js文件所属目录，跟着bundle走
        // 同时也会自动在index.html中注入script引用链接，并且引用的资源名称，也取决于打包的文件名称
        new htmlWebpackPlugin({
            template:'./index.html'
        })
    ],
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    //注意：这里的顺序很重要，不要乱了顺序
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/(jpg|png|gif|svg)$/,
                use:[
                    'file-loader'
                ]
            }
        ]
    }
}

可以把根目录index.html的script引用注释

    <!-- <script src="src/main.js"></script> -->
    <!-- 需要把打包过后生成的文件引入 -->
    <!-- <script src="dist/bundle.js""></script> -->

⑦打包

npm run build

3、打包less文件，Font字体、sass文件等更多资源查看文档：https://www.webpackjs.com/loaders/

4、补充：如果实时监控代码改变，并且自动打包和打包后自动刷新浏览器，可以使用插件 webpack-dev-server

①安装依赖

npm install --save-dev webpack-dev-server

②配置

// 该文件其实最终是要在node环境下执行的
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

// 导出一个具有特殊属性配置的对象
module.exports = {
    entry:'./src/main.js',/* 入口文件模块路径 */
    output:{
        path:path.join(__dirname,'./dist/'),/* 出口文件模块所属目录，必须是一个绝对路径 */
        filename:'bundle.js'/* 打包的结果文件名称 */
    },
    devServer:{
        // 配置webpack-dev-server的www目录
        contentBase:'./dist'
    },
    plugins:[
        // 该插件可以把index.html打包到bundle.js文件所属目录，跟着bundle走
        // 同时也会自动在index.html中注入script引用链接，并且引用的资源名称，也取决于打包的文件名称
        new htmlWebpackPlugin({
            template:'./index.html'
        })
    ],
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    //注意：这里的顺序很重要，不要乱了顺序
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/(jpg|png|gif|svg)$/,
                use:[
                    'file-loader'
                ]
            }
        ]
    }
}

③配置npm script

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack",
    "watch-build": "webpack --watch",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

④执行指令：该工具会自动打包，打包完毕后会自动开启一个服务器，默认监听8080端口，同时自动打开浏览器访问，接下来会自动监视代码的改变，然后自动编译，编译完毕，自动刷新浏览器。

npm run dev