webpack学习笔记

Posted 2020-11-03 欢迎

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack学习笔记相关的知识，希望对你有一定的参考价值。

　　webpack顾名思义是打包工具。当前编码界，早已不再是最初的那种一个html引用一个css和一个js来完成所有的页面渲染和处理的模式了，尤其是前端，更加偏向组件化模块化，一个完整的页面是由不知道多少个独立的模块拼接组成，而这些模块一般都被写成都具有自己独立的一套内容html，样式css，脚本js。所以webpack主要用来将这些零散的文件根据依赖关系打包成单独的可以直接使用的文件。在微服务的架构中使用尤其广泛。

　　自己这两年的项目中也有接触webpack，不过都是公司已经配置好的一套体系，只需要根据具体场景做具体修改就好，所有没有详细研究过webpack。

　　现在进行一些基本的概念性和操作性的学习。

　　首先当下基本都是使用node进行开发配置，所以node是需要安装的。然后全局安装webpack：cnpm install webpack -g。之后在你的路径下npm init来安装node的module库。之后，在当前路径下安装webpack：npm install webpack --save-dev。

　　最基本的东西已经完成了，如果需要可以再装些别的比如

　　　　npm install jquery --save-dev
　　　　npm install style-loader css-loader --save-dev
　　　　npm install extract-text-webpack-plugin –-save-dev

　　然后，我们配置好package.json（自动配置）和webpack.config.json（手动配置）两个文件。并建立好相应的需要打包的文件和入口文件。

　　在webpack.config.json配置过程中遇到很多问题。比如：

　　　　1.webpack不是内部命令，重新全局和局部安装，并对一些必要的依赖如extract-text-webpack-plugin进行node安装；

　　　　　　1.1DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

　　　　　　　解决办法：npm install extract-text-webpack-[email protected]next --save-dev。webpack版本是4

　　　　2.网上的很多教程都是webpack1的，而我们安装使用的是4，所有就出现很多问题比如路径问题：

 　　　　　　2.1- configuration.output.path: The provided value "./dist/js/" is not an absolute path!

　　　　　　　　解决办法：将path进行修改：path: __dirname + "/dist/js", webpack2的写法

　　　　　　2.2unknown property ‘loaders‘

　　　　　　　　解决办法：module下面的loaders字符换成rules，也是webpack2的写法。

　　　　　　2.3WARNING in configuration The ‘mode‘ option has not been set. Set ‘mode‘ option to ‘development‘ or ‘production‘ to enable defaults for this environment.

　　　　　　　　解决办法：这是一个警告，不影响功能。不过可以通过配置script然后执行你配置的脚本来解决。配置方法：

"scripts": {

　　"dev": "webpack --mode development",

　　"build": "webpack --mode production"

}

　　　　　　　　然后执行npm run + 脚本比如bulid，就可以了。当然还有一些别的复杂的配置。

　　　　　　　　例子中dev和build的区别：

　　　　　　　　　　npm run dev  这个时候dist里面的文件的不是压缩过的

　　　　　　　　　　但是npm run build 这个时候dist的main.js就是压缩了的

　　　　　　　　2.4webpack window not defined。打包css报错。

　　　　　　　　　　解决办法：在module的rules中，需要配置css的匹配和识别规则。方法不一。

const extractCSS = new ExtractTextPlugin({
    filename: ‘./bundle.css‘,       // 编译后生成的css文件名
    disable: false,
    allChunks: true
});

……

module: {
　　　　//加载器配置
        rules: [
　　　　　　{ 
　　　　　　　　test: /\.css$/, 
　　　　　　　　loader: extractCSS.extract({ //这里loader可换成use
                    fallback: "style-loader",
                    use: [‘css-loader‘]
              })
　　　　　　}
}

如果路径配置的不对，打包不会报错但不会生成编译文件。

最终经过近10个问题的解决，终于成功打包出dist目录和文件了。