webpack打包html，css，js，图片及加载sass流程

此文章适合小白，仅为个人总结

1、安装node，配置环境变量，新版node安装时会默认配置好环境变量

2、全局安装webpack4，webpack4需要配合webpack-cli使用，全局安装webpack-cli

命令：npm install -g webpack //全局安装webpack；npm install -g webpack-cli //全局安装webpack-cli

3，新建项目文件夹webpack1（名字自己起），进入文件夹，shift+鼠标右键，打开命令窗口，执行npm init，一路回车即可，执行完后会新增一个package.json文件

4、继续输入命令安装webpack和webpack局部依赖包，npm install –save-dev webpack；npm install –save-dev webpack-cli //把webpack-cli安装到devDependencies

安装完成后此时的目录结构和packjson的内容

image

5、安装 各个模块：

npm install style-loader css-loader –save-dev      //打包css style

npm install extract-text-webpack-plugin –save-dev    //打包css style  wepack4.0一下版本

npm install mini-css-extract-plugin  –save-dev   // //打包css style  wepack4.0一下版本

npm install optimize-css-assets-webpack-plugin  –save-dev  //压缩css

npm install –save-dev sass-loader         //打包scss
//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install –save-dev node-sass

npm install  url-loader file-loader img-loader –save-dev     //url-loader file-loader用于打包css中的图片，img-loader用于图片压缩

npm install html-webpack-plugin –save-dev       //打包html文件

此时package.json如下：

image

6.在webpack下新建目录src，并在src建立相应的资源目录，login.html不需要引入js和css文件，打包自动引入。目录图如下：

image

login.js中引入login.scss

require ("../style/login.scss");

7、在webpack1中新建webpack.config.js,粘贴一下代码：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
        login:__dirname + '/src/js/login.js',//多入口配置
    },
    output:{
        path: path.resolve(__dirname, './build'),//打包后的文件存放的地方  会在wepack1下生成build目录
        filename: 'js/[name].js', //js文件会生成在build/js下
    },
    module: {
        rules: [
            {
                test: /\.scss$/,   // 正则表达式，表示.css后缀的文件
                use: ['style-loader','css-loader','sass-loader']   // 针对scss文件使用的loader，注意有先后顺序，数组项越靠后越先执行
            },
            { test: /\.(jpg|png|gif|bmp|jpeg)$/,//正则表达式匹配图片规则
                use: [{
                    loader:'url-loader',
                    options:{
                        publicPath: '/webpack/build/',
                        limit:8192,//限制打包图片的大小：
                        //如果大于或等于8192Byte，则按照相应的文件名和路径打包图片；如果小于8192Byte，则将图片转成base64格式的字符串。
                        name:'image/[name].[ext]',//css中的images图片将会打包在build/image下;
                    }
                }]
            },
        ]
    },
    //插件
    plugins:[
        new HtmlWebpackPlugin({
            title:"登陆",  //生成的html title名字，在模板文件中用  调用即可
            chunks:['login'],  //引入entry中的key名字的js文件，此处为login，打包后html后会自动引入login.js文件
            filename: 'login.html', // bulid目录下生成的html文件名
            template: 'src/html/login.html' // 我们原来的index.html路径，作为模板
        })
    ]
};

8.更改package.json,更改打包命令：添加start

scripts": {
  "start": "webpack",
  "test": "echo \"Error: no test specified\" && exit 1"
}

9.在webpack下打开命令窗口，执行 npm start即可。

10、打包html中的img图片

当html中有img时，我们需要将src改成require路径。