webpack学习笔记

什么是webpack

webpack能够分析项目结构,找到JavaScript模块以及其他一些浏览器不能直接运行的拓展语言(比如Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。包括如下内容:

  • 代码转换:将TypeScript编译成JavaScript、Scss编译成CSS等
  • 文件优化:压缩JavaScript、CSS、HTML代码,压缩合并图片等
  • 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步
  • 模块合并:在采用模块化的项目中会有很多个模块和文件,需要构建功能把模块分类合并成一个文件
  • 自动刷新:监听本地源代码的变化,自动重新构建、刷新浏览器
  • 代码校验:在代码被提交到仓库前需要校验代码是否符合规范,以及单元测试是否通过
  • 自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统

使用

  • 开发环境安装
    yarn add -D webpack webpack-cli
    
  • 直接运行(执行node_modules对应的bin下的webpack.cmd)
    npx webpack
    
  • 在根文件下新建webpack.config.js配置
    //基本结构
    module.exports = {
      entry: '',//入口
      output: {},//出口
      devServer: {},//开发服务器
      module:{},//模块配置
      plugins: [],//插件的配置
      mode: 'development',//可以更改
      resolve: {},//配置解析
    }
    
  • 配置开发服务器

    yarn add -D webpack-dev-server
    
    • webpack-dev-server命令在内存中生成,可以在浏览器查看,适用于开发环境;webpack生成一个实际的文件供上线使用
  • 配置入口,注意webpack会分析入口文件打包,要注意模块间的是否有依赖关系

    // 单入口单出口
    entry: './src/index.js',//index引用a
    // 多入口单出口
    entry: ['./src/index.js','./src/a.js']//index和a是独立的两个文件
    //多入口多出口
    entry: {
      index: './src/index.js', //文件要分别打包生成两个文件
      a: './src/a.js'
    },
    output: {
      filename: '[name].[hash:8].js',//name对应entry中的键值
      path: path.resolve('./build')
    },//出口
    
  • 把打包后的文件引入html再打包到build文件下

    yarn add -D html-webpack-plugin
    
    • 配置插件
      plugins: [
        new HtmlWebpackPlugin({//打包HTML插件
            template: './src/index.html',
            title: 'webpack-test',
            hash: true, //清空缓存,在打包后的文件后加随机数
            minify: {
                removeAttributeQuotes: true,//去除双引号
                collapseWhitespace: true//去除空格
            }
        })
      ],//插件的配置
      
    • 插件使用ejs语法,可以将参数传到HTML文件
      <title><%=htmlWebpackPlugin.options.title%></title>
      
    • 多页面文件配置多个plugin, chunks对应入口文件名
      new HtmlWebpackPlugin({//打包HTML插件
      filename: 'b.html',
      template: './src/index.html',
      title: 'webpack-test',
      hash: true, //清空缓存,在打包后的文件后加随机数
        chunks: ['a']
      })
      
  • 热更新
    //webpack.config.js
    new webpack.HotModuleReplacementPlugin()
    //index.js
    if(module.hot) {
      module.hot.accept();
    }
    
  • 配置loader
    yarn add -D style-loader css-loader less-loader
    
    • 配置规则:规则是从右到左解析
      module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            {loader: 'style-loader'},
            {loader: 'css-loader'}//先解析css,再将其插入style标签
          ]
        }
      ]
      }, //模块配置
      
  • 抽离公共样式
    yarn add -D extract-text-webpack-plugin@next #for webpack4+
    
    • 配置
      const ExtractTextPlugin = require("extract-text-webpack-plugin");
      module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
              fallback: "style-loader",
              use: "css-loader"
            })
          }
        ]
      },
      plugins: [
        new ExtractTextPlugin("styles.css"),
      ]
      }
      
  • 自动兼容前缀
    yarn add -D postcss-loader autoprefixer
    
    • postcss.config.js
      module.exports = {
        plugins: [
            require('autoprefixer')
        ]
      }
      

  转载请注明: Blog webpack学习笔记

 上一篇
axios基础及源码解析 axios基础及源码解析
参考资料Axios中文说明 概览axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。基本特性如下: 从浏览器中创建XMLHttpRequest 从node.js中创建http请求 支持Promise api
2018-09-22
下一篇 
清除浮动方法总结 清除浮动方法总结
参考资料 CSS-清除浮动 理解当容器的高度自适应,且容器的内容中有浮动的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的C
2018-09-13
  目录