Webpack基本配置

曾经终败给现在 2023-01-07 07:21 212阅读 0赞

## 安装webpack ##

**全局安装**

全局安装

`npm install webpack -g`

指定版本安装

`npm install webpack@3.6.0 -g`

#### 1.安装webpack ####

全局安装

`npm install webpack -g`

指定版本安装

`npm install webpack@3.6.0 -g`

#### 2.基本使用webpack ####

使用webpack对js文件进行打包

`webpack 打包的项目路径 打包后的项目路径`

#### 3.webpack的配置 ####

###### （1）打包指令配置 ######

pack.json文件中的script中可以配置文件的映射关系，使用更加快捷的命令

"scripts": { 
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "lint": "eslint --ext .js,.vue src",
        "build": "node build/build.js"
      }

如使用dev取代webpack

"dev":"webpakg"

运行时使用以下代码进行打包

`npm run dev`

\#\#\#\#\#\#（2）打包出入口文件配置

创建webpack.config.js文件进行配置

//加载path模块，进行路径拼接
    module.exports = { 
        //需要编译的文件路径
        entry: { 
        app: './src/main.js'
      },
        //需要编译到的文件路径
      output: { 
          //路径
        path: config.build.assetsRoot,
          //文件名
        filename: '[name].js',
          //配置打包图片的默认路径
        publicPath:"文件夹名/"
      },
    }

###### （3）webpack中打包样式文件css less scss 等 ######

[官方参考文档链接][Link 1]

第一步：通过npm安装需要使用的loader

将模块导出的内容作为样式并添加到 DOM 中

`npm install --save-dev style-loader`

加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码

`npm install --save-dev css-loader`

加载并编译 LESS 文件

`npm install less less-loader --save-dev`

加载并编译 SASS/SCSS 文件

`npm install sass-loader sass webpack --save-dev`

第二步：在webpack.config.js中的module进行配置

module.exports = { 
      module: { 
        rules: [
          { 
              //正则表达式，匹配.css结尾的，匹配到之后使用以下规则
              //使用规则时，从右向左进行匹配
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
          },
          { 
            test: /\.less$/,
            use: [
              { 
                loader: "style-loader",
              },
              { 
                loader: "css-loader",
              },
              { 
                loader: "less-loader",
                options: { 
                  lessOptions: { 
                    strictMath: true,
                  },
                },
              },
            ],
          },
        ],
      },
    };
    //file-loader 和 url-loader 能够非常好的处理资源文件，需在配置文件中进行配置，相关配置请参阅。
    
    然后运行 webpack。
    
    toString

\#\#\#\#\#\#（4）webpack中处理图片文件

安装图片处理的loader

npm install url-loader --save-dev

在webpack.config.js中的module进行配置

图片小于8kb

module.exports = { 
      module: { 
        rules: [
          { 
            test: /\.(png|jpg|gif)$/i,
            use: [
              { 
                loader: 'url-loader',
                options: { 
                      //将图片小于8kb的处理成base64编码字符串
                  limit: 8192,
                  	//图片的名称和文件储存的位置
                },
              },
            ],
          },
        ],
      },
    };
    And run webpack via your preferred method.
    
    Options

图片大于8kb，则需要安装 file-loader

`npm install file-loader --save-dev`

图片的options配置

*  img
    
    文件要打包的文件夹
 *  name
    
    获取图片原来的名字，放在该位置
 *  hash:8
    
    为了防止图片命名冲突依然使用hash，但是只使用前八位
 *  ext
    
    使用图片原理的扩展名
    
    示例：
    
        options: { 
                          //将图片小于8kb的处理成base64编码字符串
                      limit: 8192,
                      	//图片的名称和文件储存的位置
                      name:"img/[name].[hash].[ext]"
                    },

\#\#\#\#\#\#（5）es6转es5

安装相应的包

`npm install -D babel-loader @babel/core @babel/preset-env`

或

`npm install -D babel-loader @babel/core @babel/preset-es2015`

配置

{ 
          test: /\.m?js$/,
             //不包含node_modules|bower_components中的js文件
          exclude: /(node_modules|bower_components)/,
          use: { 
            loader: 'babel-loader',
            options: { 
              presets: ['es2015']
            }
          }
        }

###### (6)配置vue环境 ######

安装npm包

`npm install vue-loader vue-template-compiler --save-dev`

配置

{ 
          test: /\.vue$/,
          use: { 
            loader: 'vue-loader',
          }
        }

#### 4.plugin插件 ####

\#\#\#\#\#\#（1）版权插件

1.在webpack.config.js中加载webpack模块

2.添加配置

示例：

plugins:[
        new webpack.BannerPlugins("最终版权归***所有")
    ]

###### (2)将index.html也进行打包 ######

1.安装HtmlWebpackPlugin插件

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

2.在webpack.config.js中加载html-webpack-plugin模块

const HtmlWebpackPlugin =require("html-webpack-plugin")

3.在plugins中配置插件

plugins:[
        new webpack.BannerPlugins("最终版权归***所有")
        new HtmlWebpackPlugin({ 
        		template:"index.html"
        })
    ]

\#\#\#\#\#\#(3)将打包的js文件进行压缩

1.安装uglifyjs-webpack-plugin 插件–save-dev

`npm install uglifyjs-webpack-plugin --save-dev`

2.在webpack.config.js中加载html-webpack-plugin模块

const UglifyjsWebpackPlugin =require("uglifyjs-webpack-plugin")

3.在plugins中配置插件

plugins:[
        new webpack.BannerPlugins("最终版权归***所有"),
        new HtmlWebpackPlugin({ 
        		template:"index.html"
        }),
        new UglifyjsWebpackPlugin()
    ]

\#\#\#\#\#\#4.搭建本地服务器插件

1.安装webpack-dev-service

`npm install webpack-dev-service --save-dev`

2.配置devService

devService:{ 
        contentBase:"./监视的文件夹名",
        inline:true, //表示是否实时监听
        port:8080    //指定端口号，默认8080
    }

3.在package.json中的script中配置映射

"dev":"webpack-dev-service --open" //设置--open自动打开

4.在本地服务器跑起来

终端中输入`webpack dev service`

[Link 1]: https://webpack.docschina.org/loaders/#styling