webpack随笔纪要

webpack安装前提条件：

安装node.js环境

webpack安装过程：

npm install -g webpack  安装webpack到全局环境中(缺点：webpack官方不建议安装到全局，这样会影响项目，如果之前的项目使用的是webpack低版本，那会导致低版本使用了安装在全局环境中的webpack版本)

webpack安装到局部环境(注意：项目目录名称不能是webpack关键字)

1.cd 进入项目目录

2.npm init(初始化环境，默认需要填写一堆基本信息)

3.npm install --save-dev webpack(使用--save-dev是开发环境，如果需要使用生产环境则直接使用--save)

webpack打包项目过程(以下目录都要有的目录)

1.dist(用于生产环境，也就是打包后的文件目录)

2.src(用户开发环境，也就是书写的代码都放在此目录下)

3.在dist目录下新建一个index.html文件并在里面书写html代码，同时在结尾加上一段<script src="./bundle.js"></script>

4.在src目录下新建一个entery.js并写入document.getElementById("title").innerHTML = "Hello World";  (其中entery.js为入口文件)

5.命令行使用webpack src/entery.js dist/bundle.js  (解析：webpack 要打包的文件  打包后的目标文件，webpack最新版需要使用webpack -o 要打包的文件  打包后的目标文件)

6.安装live-server(nmp install -g live-server)

7.运行live-server会打开浏览器进行预览

△真正项目上不是上面这样用，上面是简单的做一下打包，下面是在项目中会用到的方式进行打包的过程

注意：要使用webpack.conf.js配置文件,需要在package.js中的scripts选项加入"build": "webpack --config webpack.conf.js",然后直接使用npm run build即可进行打包

1.在项目根目录下新建webpack.conf.js,该文件里的内容：

//引入node的path模块

const path=require("path");

module.exports={

    //入口配置项

    entry:{

        //入口文件路径

        index1:path.join(__dirname, "./src/index1.js"),

        index2:path.join(__dirname, "./src/index2.js"),

    },

    //出口配置项

    output:{

        //输入的目标路径

        filename: "[name].bundle.js",

        path:path.resolve(__dirname, "dist")

    },

    //模块配置项

    module:{},

    //插件配置项

    plugins:[],

    //webpack开发服务项

    devServer:{}

}

△webpack的热更新

1.在webpack.conf.js的devServer中加入以下参数：

devServer:{

    //需要热更新的目录路径

    contentBase:path.resolve(__dirname, "dist"),

    //热更新访问地址

    host:"192.168.3.10",

    //热更新端口

    port:1717,

    //热更新是否压缩(服务器端)

    compress:true

}

2.使用热更新需要环境中安装webpack-dev-server服务,如果该服务需要安装到当前项目中,直接使用nmp install webpack-dev-server --save-dev(开发环境,--save安装到上线环境),

安装完成之后,需要在目录中的package.json中的scripts选项中配置一个别名

"dev": "webpack-dev-server --config webpack.conf.js"

3.运行npm run dev,

如果不这样配置会报错，说找不到入口(完成后,直接访问http://192.168.3.10:1717即可,就可以完成热更新操作)

△打包CSS3文件

1.打包css文件需要安装style-loader、css-loader模块(执行npm install style-loader --save-dev、npm install css-loader --save-dev)

2.在入口文件所在目录中新建css文件夹并在该文件夹中新建样式文件,然后在入口js文件中使用import css from 路径(该路径必须为相对路径)

3.在webpack.conf.js文件的modules选项中配置如下参数:

rules:[

            {

                //正则表达式,匹配对应后缀名的文件

                test:/\.css$/,

                //使用什么loader模块进行打包

                use:['style-loader', 'css-loader']

            }

        ]

例外两种写法:

rules:[

            {

                //正则表达式,匹配对应后缀名的文件

                test:/\.css$/,

                //使用什么loader模块进行打包

                loader:['style-loader', 'css-loader']

            }

        ]

rules:[

            {

                //正则表达式,匹配对应后缀名的文件

                test:/\.css$/,

                //使用什么loader模块进行打包

                loader:[{

                    loader:"style-loader"

                },{

                    loader:"css-loader"

                }]

            }

        ]

△打包压缩js文件

1.执行npm install uglifyjs-webpack-plugin --save-dev进行安装并保存到package.json中

2.在webpack.conf.js顶部中引入：

const uglify = require("uglifyjs-webpack-plugin");

3.plugins中写上new uglify();

4.执行打包指令进行打包

△打包html文件

1.执行npm install html-webpack-plugin --save-dev

2.在webpack.conf.js中引入const htmlPlugin = require('html-webpack-plugin');

3.将原来在dist目录下的index.html剪切到src目录下并将index.html文件中引入的js文件去掉(因为打包出来的文件webpack会自动引入js文件，无须我们手动添加)

4.在webpack.conf.js中的plugins属性中输入如下：

new htmlPlugin({

    minify:{

        //去掉html文件中引号(单引号、双引号都会去除)

        removeAttrubuteQuotes:true

    },

    //防止js文件有缓存，所以会在js文件后加入?hash值(热更新的时候hash值会改变)

    hash:true,

    //需要打包的html文件

    template:"./src/index.html"

});

△CSS文件中的图片处理

1.执行npm install file-loader url-loader --save-dev , (这两个是解析图片用的loader,这两个loader只需要引入url-loader即可,以为url-loader里已经包含了file-loader,他们之间会自动转换)

2.在webpack.conf.js中module中添加(如果图片小于limit的大小会把图片转成base64的格式打包进js中,如果大于limit会直接把图片放入dist目录中,outputPath指的是超出limit大小会把图片放到该目录下,并将该路径打包到js文件中):

module:{

    rules:[{

        test:/\.(png|jpg|gif)$/,

        use:[{

            loader:"url-loader",

            options:{

                limit:500000,

                outputPath:'images/'

            }

        }]

    }]

}

3:在src下新建一个images文件夹,并把背景图片bg.jpg放入该文件夹中

4:在src/css/style.css文件中设置一个背景图片：

body{

    background:url(../images/bg.jpg) no-repeat;

}

5.运行live-server查看结果

△解决图片路径问题

1.运行npm install extract-text-webpack-plugin --save-dev

2.定义const extractTextPlugin = require("extract-text-webpack-plugin");

3.在webpack.conf.js定义一个变量(这里的地址需要定义成devServer上的地址和端口)

var websit = {

    publicPath:"http://127.0.0.1:8080"

};

4.在webpack.conf.js中出口文件配置output选项中加入：

publicPath:website.publicPath

4.webpack.conf.js中将module中的值：

rules:[

    {

        test:/\.css$/,

        use: extractTextPlugin.extract({

            fallback: "style-loader",

            use: "css-loader"

            })

    }

]

5.webpack.conf.js中plugins的值增加(意思就是将抽离出来的css文件放入dist目录下的css文件夹中)：

new extractTextPlugin("css/style.css")

4.然后打包,会发现打包出来的index.html中的路径会变成绝对路径

注意:安装extract-text-webpack-plugin,如果webpack版本小于4.0可以直接使用npm install extract-text-webpack-plugin --save-dev进行安装,

如果是webpack4.0之后的版本需要使用npm install extract-text-webpack-plugin@next --save-dev进行安装即可

△解决html图片的问题

1.运行npm install html-withimg-loader --save-dev

2.在webpack.conf.js中的module加入：

{

    test: /\.(htm|html)$/i,

    use:[ 'html-withimg-loader']

}

3.在src/index.html加入<img src="./images/bg.js"/>

4.运行打包操作,打包完成后会发现src的url也会打进去了

注意：此模块要结合extract-text-webpack-plugin进行使用，就可以解决图片的路径问题

△分离less文件到css文件中

1.运行npm install less less-loader --save-dev

2.在src/css目录下新建style.less文件,写入：

@bgcolor:red;

#div-title{

    width:100px;

    height:100px;

    background-color:@bgcolor;

}

3.在入口文件(index.js)中引入该less文件：import less from "./css/style.less";

4.在webpack.conf.js中module中将加入：

{

    test:/\.(less)$/,

    use: extractTextPlugin.extract({

        fallback: "style-loader",

        use: extractTextPlugin.extract({

            fallback: "style-loader",

            use: [{

                loader:"css-loader"

            },

            {

                loader:"less-loader"

            }]

        })

    })

}

5.打包测试

注意:less打包也需要配合extract-text-webpack-plugin进行使用与输出

△分离sass文件到css文件中

sass中分两种语法：

sass语法：不能带大括号、分号，不然会出现语法错误，如，

#abc

    width: 100px

    height: 100px

注意：width: 100px中:后必须要有空格否则会出现语法错误，这点值得注意

scss语法：跟原来css写法一样

1.运行npm install node-sass sass-loader --save-dev

2.在src/css目录下新建style.scss文件,写入：

$fontColor:red;

#div-title{

    color:$fontColor;

}

3.在入口文件(index.js)中引入该sass文件：import sass from "./css/style.scss";

4.在webpack.conf.js中module中将加入：

{

    test:/\.(sass|scss)$/,

    use: extractTextPlugin.extract({

        fallback: "style-loader",

        use: extractTextPlugin.extract({

            fallback: "style-loader",

            use: [{

                loader:"css-loader"

            },

            {

                loader:"sass-loader"

            }]

        })

    })

}

5.打包测试

注意:sass打包也需要配合extract-text-webpack-plugin进行使用与输出

△给需要css3属性加上前缀

1.执行npm install postcss-loader autoprefixer --save-dev

2.在项目根目录下新建名为postcss.config.js文件,并在里面写入：

module.exports={

    plugins:[

        //安装的插件名称

        require("autoprefixer")

    ]

}

3.在webpack.conf.js的module的rules下.css规则下加入:

{

    loader:"postcss-loader"

}

这种写法可以在后面加入其它参数选项,还可以使用这种方式:

"postcss-loader"

4.在.css文件中加入存在兼容问题的属性:

transform: rotate(45deg);

appearance: none;

5.打包测试

注意：如果打包没问题，一般css文件中就会自动给需要加前缀的属性加上前缀，如：

-webkit-transform: rotate(45deg);

        transform: rotate(45deg);

-webkit-appearance: none;

    -moz-appearance: none;

        appearance: none;

△删除没用使用过的css样式(冗余样式)

1.执行npm install purifycss-webpack purify-css --save-dev(--save-dev等价于-D)

2.在webpack.conf.js文件中加入:

const glob = require("glob");

const PurifyCSSPlugin = require("purifycss-webpack");

3.在webpack.conf.js的plugins中加入：

new PurifyCSSPlugin({

    //通过这个插件检索src下所有html文件没有使用到的css属性进行删除

    paths:glob.sync(path.join(__dirname, "src/*.html"))

})

4.打包测试

△使用devtool进行调试

在webpack.conf.js中加入参数：

devtool:'cheap-source-map'

具体的参数值参考https://blog.csdn.net/qq_39963971/article/details/78218970

△引入jquery

方法一(局部引入)：

1.执行npm install jquery --save-dev

2.在入口文件引入jquery

import $ from 'jquery';

3.使用jquery进行常规操作即可

方法二(全局引入)：

1.执行npm install jquery --save-dev

2.在webpack.conf.js中引入

const webpack = require('webpack');

3.在webpack.conf.js的plugins中使用：

new webpack.ProvidePlugin({

        $:"jquery"

    })

4.使用jquery进行常规操作即可

△使用BannerPlugin声明版权信息

1.在webpack.conf.js中引入webpack:

const webpack = require("webpack");

2.在webpack.conf.js中plugins中声明版权信息：

new webpack.BannerPlugin('JS版权所有，看官方免费视频到js.com收看')

△使用ProvidePlugin引入插件

1.执行npm install jquery --save-dev

2.webpack.conf.js中entry中加入：

jquery:'jquery'

2.在webpack.conf.js中引入webpack

const webpack = require("webpack");

3.在webpack.conf.js的entry中引用：

jquery:'jquery'

4.在webpack.conf.js的plugins中引入插件：

//(4.0之前版本)

new webpack.optimize.CommonsChunkPlugin({

    //name对应入口文件中的名字，我们起的是jQuery,多个插件用['jquery', 'vue']

    name:'jquery',

    //把文件打包到哪里，是一个路径,多个插件用filename:"dist/js/[name].js",

    filename:"dist/js/jquery.js",

    //最小打包的文件模块数，这里直接写2就好

    minChunks:2

})

//(4.0版本之后),要与entry和devServer平级

optimization:{

        splitChunks:{

            cacheGroups:{

                commons:{

                    name:'jquery',

                    filename:"dist/js/jquery.js",

                    minChunks:2

                }

                //如果抽离多个类库写在这里

            }

        }

    }

△静态资源集中输出

1.执行npm install copy-webpack-plugin --save-dev

2.在webpack.conf.js引入安装好的插件

const copyWebpackPlugin = require("copy-webpack-plugin");

3.在webpack.conf.js中plugins中引入：

new copyWebpackPlugin([{

    //需要打包的目录

    from: __dirname + "/src/public",

    //目标目录,使用相对路径即可,相对于打包后的路径

    to: "./public"

}])

4.在项目根目录下新建public目录,随便新建一个文件,进行打包测试

△引入json文件

1.在src下新建一个文件名叫config.json,内容为：

{

    "name":"张三",

    "age":24,

    "sex":"男"

}

2.在入口文件使用:

var json = require("./config.json");

3.使用alert打印json里的属性

△启动webpack中的热更新

1.在webpack.conf.js引入：

const webpack = require("webpack");

2.在webpack.conf.js中的plugins加入：

new webpack.HotModuleReplacementPlugin()