总结webpack基本配置

其他 2019-02-22 21:50:51 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36407748/article/details/84972056 
#  初始化package.json
$  npm init -y

#  本地安装webpack webpack-cli webpack-dev-server
$  npm i webpack webpack-cli webpack-dev-server -D 

#  创建入口 出口 及模板  => webpack4.x中打包默认找src/index.js作为默认入口
$  mkdir src config  dist

#  查看目录 
$  ls

#   创建文件 
$ 	touch src/index.js	dist/index.html

#	先打个包
$	npx webpack

#	解决出现的黄色警告
	mode是webpack中独有的，有两种打包环境，一个是开发环境：development，
    另外一个是生产环境：production
	打包的时候输入
$ 	npx webpack --mode=development 或者 npx webpack --mode=production

#	创建 webpack.dev.js 开发配置文件
$	touch config/webpack.dev.js

# 	删除 dist/main.js  src/index.js 文件
$	rm dist/main.js src/index.js

# 	在src文件夹下面创建main.js文件
$	touch src/main.js

# 	配置webpack.dev.js文件
/***************************************************************************************/
    const path = require("path");
    module.exports = {
      mode: "development", //  开发环境
      entry: { // 入口
        main: "./src/main.js"  // 这个路径必须是入口文件所处的目录的绝对路径的字符串。
      },
    // entry: path.resolve(__dirname, "./../src/main.js"), // => 或者这种写法
      output: {
        // 出口
        filename: "bundle.js", // 打包后的文件名
        path: path.resolve(__dirname, "./../dist") //文件名所在的路径
      },
      // 用到的模块 ：比如解析css style样式  图片 字体 等
      module: {},
      // 用到的插件
      plugins: [],
      // 配置热加载服务
      devServer: {}
    };
/***************************************************************************************/
# 	如果自定义了webpack的配置，就不能再执行之前的webpack --mode="development"命令了，会报错的，因为	 webpack4打包默认找的src下面的index.js入口，我们前面已经删除了，这里src下面死main.js文件，这就需要	手动让打包的时候执行你的配置文件


# 	配置指令build打包命令  => 打开 package.json，在scripts下配置如下的指令，如果不懂，可以直接执行		npx webpack -h  会看到好多配置，第一个就是 --config 的配置
 	--config              Path to the config file
                          [字符串] [默认值: webpack.config.js or webpackfile.js]
/***************************************************************************************/
    {
      "name": "webpack-client",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "build": "npx webpack --config config/webpack.dev.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^4.27.1",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.10"
      }
    }
/***************************************************************************************/

#	接着执行 npm run build 进行打包

#	配置多入口， entry属性配置成一个对象，同时修改出口 output.filename的值:"[name].js",********		注：[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。
/***************************************************************************************/
    const path = require("path");

    module.exports = {
      mode: "development", //  环境
      //   entry: "./src/main.js", // 1个入口
      //   entry: path.resolve(__dirname, "./../src/main.js"),
      //   多入口配置
      entry: {
        main: "./src/main.js",
        main2: "./src/main2.js"
      },
      output: {
        // 出口
        filename: "[name].js", // 打包后的文件名
        path: path.resolve(__dirname, "./../dist") //.文件名所在的路径
      },
      // 用到的模块 ：比如解析css style样式  图片 字体 等
      module: {},
      // 用到的插件
      plugins: [],
      // 配置热加载服务
      devServer: {}
    };
/***************************************************************************************/

#	添加devServer配置
/***************************************************************************************/
      // 配置热加载服务
    devServer: {
        contentBase: path.resolve(__dirname, "./../dist"), //设置基本目录
            host: "localhost",    
                compress: true, // 是否启用压缩    
                    port: 9856,		// 端口号
                        overlay: {		// 出错时，浏览器上显示警告和错误
                            warnings: true,
                                errors: true
                        },
                            open: true 		// 自动打开浏览器
    }
/***************************************************************************************/

#	添加启动指令 npm start 
/***************************************************************************************/
  "scripts": {
      "build": "npx webpack --config config/webpack.dev.js",
      "start": "npx webpack-dev-server --config config/webpack.dev.js"
  },
/***************************************************************************************/

# 	自动打包html，并引入打包的js，删除dist目录，在src下 建立 index.html

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

#	插件配置参考 ： https://www.npmjs.com/package/html-webpack-plugin

/***************************************************************************************/
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  plugins: [
    new HtmlWebpackPlugin({
      title: "webpack 练习",
      template: "./src/index.html", // 这个路径的规则同入口的路径规则
      filename: "./../dist/main.html", // 打包后生成的文件名
      minify: {
        // 配置压缩相关 默认全部开启是在 production 环境下
        collapseWhitespace: true, // 去掉空白换行
        removeComments: true, //
        removeRedundantAttributes: true, // 去掉属性上的引号
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true
      },
      hash: true //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
    })
  ],

/***************************************************************************************/
#   清理dist文件  => 每次打包后都会生成一个新增加的文件

$	npm install clean-webpack-plugin --save-dev

	const CleanWebpackPlugin = require("clean-webpack-plugin");
# 	在webpack.dev.js 中 找到plugins选项
	
/***************************************************************************************/
	new CleanWebpackPlugin(["dist"]),
/***************************************************************************************/
        
# 	处理样式css style sass 加载 并启用sourcemap进行 css调试  => loader 样式处理 https://www.webpackjs.com/loaders/

$	npm i css-loader style-loader node-sass sass-loader -D

#	配置webpack.dev.js  在 module属性下配置规则

const path = require("path");

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

const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  mode: "development", //  环境
  //   entry: "./src/main.js", // 1个入口
  entry: path.resolve(__dirname, "./../src/main.js"),
  //   多入口配置
  //   entry: {
  //     main: "./src/main.js",
  //     main2: "./src/main2.js"
  //   },
  output: {
    // 出口
    filename: "[name].js", // 打包后的文件名
    path: path.resolve(__dirname, "./../dist") //.文件名所在的路径
  },
  devtool: "inline-source-map",
  // 用到的模块 ：比如解析css style样式  图片 字体 等
  module: {
    rules: [
      // 规则数组
      {
        test: /\.(sa|sc|c)ss$/, // 匹配规则，这里意思只要匹配到文件结尾是以 .scss .sass  .css 结尾的
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ] // 在上边的规则匹配到后，都使用下边这3个loader进行处理 执行顺序从 右 -> 左
      }
    ]
  },
  // 用到的插件
  plugins: [
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
      title: "webpack 练习",
      template: "./src/index.html", // 这个路径的规则同入口的路径规则
      filename: "./../dist/main.html", // 打包后生成的文件名
      minify: {
        // 配置压缩相关 默认全部开启是在 production 环境下
        collapseWhitespace: true, // 去掉空白换行
        removeComments: true, //
        removeRedundantAttributes: true, // 去掉属性上的引号
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true
      },
      hash: true //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
    })
  ],
  // 配置热加载服务
  devServer: {
    //   设置基本目录
    contentBase: path.resolve(__dirname, "./../dist"),
    host: "localhost",
    // 是否启用压缩
    compress: true,
    // 端口号
    port: 9856,
    // 出错时，浏览器上显示警告和错误
    overlay: true,
    // 自动打开浏览器
    open: true
  }
};


#	自动添加css前缀，处理浏览器兼容
$	npm i postcss-loader autoprefixer -D

在最后一个loader前加入下边的代码
    {
        loader: "postcss-loader",
        options: {
        	ident: "postcss",
        	sourceMap: true,
        	plugins: loader => [
        		require("autoprefixer")({ browsers: ["> 0.15% in CN"] }) // 添加前缀
        	]
        }
    },

#	将css文件进行单独专门打包抽取了样式，就不能再用 style-loader注入到 html 中了。

$	npm install --save-dev mini-css-extract-plugin

#	css进行压缩 （一般用于生产环境）
$	npm i -D optimize-css-assets-webpack-plugin

# 	添加配置 

const path = require("path");

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

const CleanWebpackPlugin = require("clean-webpack-plugin");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
  mode: "development", //  环境
  //   entry: "./src/main.js", // 1个入口
  entry: path.resolve(__dirname, "./../src/main.js"),
  //   多入口配置
  //   entry: {
  //     main: "./src/main.js",
  //     main2: "./src/main2.js"
  //   },
  output: {
    // 出口
    filename: "[name].js", // 打包后的文件名
    path: path.resolve(__dirname, "./../dist") //.文件名所在的路径
  },
  devtool: "inline-source-map",
  // 用到的模块 ：比如解析css style样式  图片 字体 等
  module: {
    rules: [
      // 规则数组
      {
        test: /\.(sa|sc|c)ss$/, // 匹配规则，这里意思只要匹配到文件结尾是以 .scss .sass  .css 结尾的
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              sourceMap: true // 启用sourceMap后，调试css样式时可以看到你调试的那段css代码在哪个文件，哪一行
            }
          },
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              sourceMap: true,
              plugins: loader => [
                require("autoprefixer")({ browsers: ["> 0.15% in CN"] }) // 添加前缀
              ]
            }
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ] // 在上边的规则匹配到后，都使用下边这3个loader进行处理 执行顺序从 右 -> 左
      }
    ]
  },
  // 用到的插件
  plugins: [
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
      title: "webpack 练习",
      template: "./src/index.html", // 这个路径的规则同入口的路径规则
      filename: "./../dist/main.html", // 打包后生成的文件名
      minify: {
        // 配置压缩相关 默认全部开启是在 production 环境下
        collapseWhitespace: true, // 去掉空白换行
        removeComments: true, //
        removeRedundantAttributes: true, // 去掉属性上的引号
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true
      },
      hash: true //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
    }),
    new MiniCssExtractPlugin({
      filename: "[name].[hash:8].css", // 设置最终输出的文件名，为了处理浏览器缓存，加入hash
      chunkFilename: "[id].[hash].css"
    })
  ],
  // 配置热加载服务
  devServer: {
    //   设置基本目录
    contentBase: path.resolve(__dirname, "./../dist"),
    host: "localhost",
    // 是否启用压缩
    compress: true,
    // 端口号
    port: 9856,
    // 出错时，浏览器上显示警告和错误
    overlay: true,
    // 自动打开浏览器
    open: true
  },
  optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin({})] // => 压缩css
  }
};


#	处理图片引入
$	npm install --save-dev file-loader

在 module下的rules数组中，新添加一个对象进行 配置
 {
     test: /\.(png|svg|gif|jpeg|jpg)$/,
     use: ["file-loader"]
 }

# 	处理图片压缩（这个插件安装时会有很多问题，推荐爬梯子）
$	npm install image-webpack-loader --save-dev

# 	将图片转化成base-64进一步优化图片
$	npm install --save-dev url-loader
	使用了url-loader后，就可以卸载 file-loader 了 
    
 	在module下的use中配置一个对象
 
    {
        test: /\.(png|svg|gif|jpeg|jpg)$/,
            use: [
                {
                    loader: "url-loader", // 根据图片大小，把图片优化成base64
                    options: {
                        limit: 10000
                    }
                },
                {
                    loader: "image-webpack-loader",
                    options: {
                        mozjpeg: { progressive: true, quality: 65 },
                        optipng: { enabled: false },
                        pngquant: {
                            quality: "65-90",
                            speed: 4
                        },
                        gifsicle: {
                            interlaced: false
                        },
                        webp: {
                            quality: 75
                        }
                    }
                }
            ]
    }


# 	处理bable 转码  处理es6新语言
$	npm i -D babel-loader@7 babel-core babel-preset-env

# 	优化bable编译速度

$	npm install babel-plugin-transform-runtime --save-dev

$	npm install babel-runtime --save

#	安装完成后在根目录下新建 .babelrc 文件
    {
      "presets": ["env"],
      "plugins": [
        [
          "transform-runtime",
          {
            "helpers": true,
            "polyfill": true,
            "regenerator": true,
            "moduleName": "babel-runtime"
          }
        ]
      ]
    }

# 	配置文件 
 {
     test: /\.js$/,
         exclude: /(node_modules|bower_components)/, // 加快编译速度，不包含node_modules文件夹内容
             use: {
                 loader: "babel-loader"
             }
 }


# 	配置解析别名
 resolve: {
   alias: {
     '@': path.resolve(__dirname, 'src/')
   }
 }

# 	js压缩(只在生产环境有效果，想看到效果请改变mode环境)
$	npm i -D uglifyjs-webpack-plugin

猜你喜欢

转载自blog.csdn.net/qq_36407748/article/details/84972056
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022