zoukankan      html  css  js  c++  java
  • webpack2 详解

    1.安装

    npm install webpack -g
    
    npm install webpack -save-dev

    2.编辑配置文件

    // 引入 path
    var path=require('path')
    
    module.exports = {
        // 指定spa应用的入口文件
        entry: path.resolve(__dirname, 'src/js/app.js'),
        // 指定项目构建的输出位置
        output: {
        	// 输出位置
            path: path.resolve(__dirname, 'dist'),
            // 文件名
            filename: 'bundle.js',
        }
    }

    3.运行

    在项目根目录执行webpack可以启动默认配置文件webpack.config.js
    运行指定配置文件执行webpack --config webpack.develop.config.js

    把运行命令放到package.json文件中

    启动命令还可以加很多参数webpack --config webpack.develop.config.js --progress --profile --colors
    这么多参数不可能都记住,所以将启动命令写到package.json的script标签中

    监听代码变化自动重新构建

    代码的变动需要多次运行npm run develop所以我们需要自动监听代码变动,然后运行构建,于是我们用到了webpack-dev-server这个模块

    (1)基本使用

    a.下载npm install webpack-dev-server@9.9.9 -save-dev,注意选择2.x版本的模块
    b.修改package.json文件中的命令webpack-dev-server --config webpack.develop.config.js --progress --profile --colors
    c.修改开发配置文件

    webpack2中推荐所有的服务配置信息都写到配置文件中的devServer属性中,不要写在package.json中
    基本配置

    devServer: {
       // 指定启动服务的更目录
       contentBase: __dirname + '/src',
       // 指定端口号
       port: 8080,
       host: 'localhost',
       // 以下信息可有可无,为了完整
       inline: true, 
       historyApiFallback: true,
       noInfo: false,
       // stats: 'minimal',
       // publicPath: publicPath
    },

    (2)热更新

    可以不刷新浏览器更新
    修改配置文件

    devServer: {
      // 指定启动服务的更目录
      contentBase: __dirname + '/src',
      // 指定端口号
      port: 8080,
      host: 'localhost',
      // 启用热更新
      hot: true,
      // 以下信息可有可无,为了完整
      inline: true, 
      historyApiFallback: true,
      noInfo: false,
      // stats: 'minimal',
      // publicPath: publicPath
    },
    

    需要配合一个内置插件一起使用

    var webpack=require('webpack')
    
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
    ]

    Loaders(加载器)
    在真正构建之前做一些预处理操作就叫加载器
    1.处理es6、es7、jsx语法加载器

    npm install babel-loader --save-dev
    npm install babel-core babel-preset-es2015 babel-preset-react -save-dev
    npm install babel-preset-stage-0 babel-preset-stage-1 babel-preset-stage-2 babel-preset-stage-3 --save-dev
    npm install babel-plugin-transform-runtime -save-dev这个插件的作用是支持es7特性
    

    修改配置文件

    module: {
      rules: [
        {
          test: /.jsx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: "babel-loader"
            }
          ]
        }
      ]
    }
    

    创建.babelrc文件

    {
      "presets": [
        "es2015",
        "react",
        "stage-0",
        "stage-1",
        "stage-2",
        "stage-3"
      ],
      "plugins": [
        "transform-runtime"
      ]
    }
    

    2.处理css文件引用的加载器

    npm install style-loader css-loader -save-dev
    

    修改配置文件

    // 处理在js中引用css文件
    {
      test: /.css$/,
      use: ['style-loader', 'css-loader'],
    },
    

    3.处理scss或者less文件引用的加载器

    npm install sass-loader less-loader node-sass -save-dev
    

    修改配置文件

    // 处理在js中引用scss文件
    {
      test: /.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
    },
    {
      test: /.less$/,
      use: ['style-loader', 'css-loader', 'less-loader'],
    },
    

    4.处理图片引用的加载器

    npm install url-loader file-loader -save-dev
    

    修改配置文件

    // 处理图片操作  25000bit ~3kb
    {
      test: /.(png|jpg|jpeg|gif)$/,
      use: 'url-loader'
    },
    

    5.处理字体文件引用的加载器

    npm install url-loader file-loader -save-dev
    

    修改配置文件

    // 处理字体文件
    {
      test: /.(eot|woff|ttf|woff2|svg)$/,
      use: 'url-loader'
    }
    

    6.处理浏览器兼容前缀

    npm install postcss-loader autoprefixer -save-dev
    

    修改配置文件

    {
      test: /.css$/,
      use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader!postcss-loader"
      })
    },
    // 处理在js中引用scss文件
    {
      test: /.scss$/,
      use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader!postcss-loader!sass-loader"
      })
    },
    {
      test: /.less$/,
      use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader!postcss-loader!less-loader"
      })
    },
    

    新建postcss.config.js

    module.exports = {
      plugins: [
        require('autoprefixer')({browsers:'last 2 versions'})
      ]
    }
    

    7.处理统一风格管理

    npm install eslint-loader -save-dev
    

    修改配置文件

    // 这个只是加载器部分的写法,具体使用请看eslint文档
    {
      enforce: "pre",
      test: /.js$/,
      exclude: /node_modules/,
      loader: "eslint-loader",
      options:{
        configFile:'.eslintrc.js'
      }
    },
    

    8.处理vue文件

    npm install vue-loader -save-dev
    

    修改配置文件

    {
      test: /.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          js: [
              'babel-loader',
              {
                loader: "eslint-loader",
                options: {
                  configFile: '.eslintrc.js'
                }
              }
          ],
          css: 'style-loader!css-loader'
        }
      }
    },

    发布策略
    简单的说就是将开发阶段的配置文件复制一份到部署的配置文件中,然后删删改改就可以了
    把热更新插件删除,devServer属性删除
    修改图片处理和字体处理加载器

    // 处理图片操作  25000bit ~3kb
    {
      test: /.(png|jpg|jpeg|gif)$/,
      use: 'url-loader?limit=25000&name=images/[name].[ext]'
    },
    // 处理字体文件
    {
      test: /.(eot|woff|ttf|woff2|svg)$/,
      use: 'url-loader?limit=100000&name=fonts/[name].[ext]'
    }
    

    接下来运行npm run publish就发布了
    不过要注意所有的css,js,图片都构建到一个bundle.js文件中了

    Plugins(插件)
    在真正构建之后做一些后处理操作就叫插件

    1.删除插件

    npm install clean-webpack-plugin -save-dev
    

    使用

    var CleanPlugin = require('clean-webpack-plugin');
    
    plugins: [
      // 删除文件夹的插件
      new CleanPlugin(['dist'])
    ]
    

    2.抽取公共js插件

    使用

    entry: {
      app: path.resolve(__dirname, 'src/js/app.js'),
      vendors: ['vue','vue-router','vuex']
    },
    
    plugins: [
      // 分离第三方应用的插件
      new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: 'vendors.js'}),
    ]
    

    3.提取样式文件插件

    npm install extract-text-webpack-plugin@4.4.4 -save-dev注意下载2.x版本
    

    使用

    // 1、抽取css的第三方插件
    var ExtractTextPlugin = require("extract-text-webpack-plugin");
    
    // 2、处理在js中引用css文件
    {
      test: /.css$/,
      use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader"
      })
    },
    // 处理在js中引用scss文件
    {
      test: /.scss$/,
      use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader!sass-loader"
      })
    },
    
    //3、加一个插件
    plugins: [
      // 删除文件夹的插件
      new ExtractTextPlugin("app.css"),
    ]
    

    4.自动生成html插件

    npm install html-webpack-plugin -save-dev
    

    在根目录创建template.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>webpack学习</title>
      </head>
      <body>
        <div id="app"></div>
      </body>
    </html>
    

    修改配置文件

    var HtmlWebpackPlugin = require('html-webpack-plugin');
    
    plugins: [
      // 自动生成html插件
      new HtmlWebpackPlugin({
        template: './src/template.html',
        htmlWebpackPlugin: {
          "files": {
            "css":["app.css"],
            "js": ["vendors.js", "bundle.js"]
          }
        },
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
        }
      }),
    ]
    

    5.压缩插件

    修改配置文件

    plugins: [
      // 压缩混淆js代码插件
      new webpack.optimize.UglifyJsPlugin({
        beautify: false,
        mangle: {
          screw_ie8: true,
          keep_fnames: true
        },
        compress: {
          warnings: false,
          screw_ie8: true
        },
        comments: false
      }),
    ]
    

    6.定义生产环境插件

    修改配置文件

    plugins: [
      // 在构建的过程中删除警告
      new webpack.DefinePlugin({
        'process.env':{
          NODE_ENV:'"production"'
        }
      })
    ]
    

    7.自动打开浏览器插件

    npm install open-browser-webpack-plugin -save-dev
    

    使用

    // 自动打开浏览器插件
    var OpenBrowserPlugin = require('open-browser-webpack-plugin')
    
    plugins: [
      // 删除文件夹的插件
      new OpenBrowserPlugin({url: 'http://localhost:8080/', browser: 'chrome'})
    ]
    

    .

  • 相关阅读:
    【leetcode】1215.Stepping Numbers
    【leetcode】1214.Two Sum BSTs
    【leetcode】1213.Intersection of Three Sorted Arrays
    【leetcode】1210. Minimum Moves to Reach Target with Rotations
    【leetcode】1209. Remove All Adjacent Duplicates in String II
    【leetcode】1208. Get Equal Substrings Within Budget
    【leetcode】1207. Unique Number of Occurrences
    【leetcode】689. Maximum Sum of 3 Non-Overlapping Subarrays
    【leetcode】LCP 3. Programmable Robot
    【leetcode】LCP 1. Guess Numbers
  • 原文地址:https://www.cnblogs.com/crazycode2/p/8041377.html
Copyright © 2011-2022 走看看