Published on

webpack3.x初始配置

Authors
  • avatar
    Name
    Hansuku
    Twitter

  • 什么是 webpack？ webPack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript 等），并将其打包为合适的格式以供浏览器使用。

  • 安装 webpack npm install -g webpack全局安装 webpack(安装错误检查 node 版本号,或者更换 cnpm 的镜像源)

  • 项目目录初始化:npm init

  • 项目目录安装:npm install --save-dev webpack

  • 如何升级: 删除 node_modules 文件夹，然后npm -install -g webpack直接升级 然后在 package.json 里改一下版本号

  • 项目目录创建 src 和 dist 目录

  • 命令行打包： webpack src/entery.js dist/bundle.js打包 js 前面的是需要打包的 js 后面是要打包后合成的 js 名和路径，这种方式比较麻烦

  • 在项目目录下创建webpack.config.js，这里能够写 webpack 的配置文件，配置出口和入口，基础配置

 const path=require('path');
    module.exports={
        entry:{//配置文件入口
            entry:'./src/entry.js',
            entry2:'./src/entry2.js'
        },
        output:{//配置文件出口
            path:path.resolve(__dirname,'dist'),
            filename:'[name].js'
        },
        module:{},//模块：例如解读CSS,图片如何转换，压缩
        plugins:[],//插件，用于生产模版和各项功能
        devServer:{}//配置webpack开发服务功能
    }
  • 安装 webpack-dev-server 热更新（本地安装）： npm install webpack-dev-server --save-dev
  • 在 webpack.config.js 的 devServer 里添加：
		devServer:{
            contentBase:path.resolve(__dirname,'dist'),
            host:'192.168.0.100',//本地IPv4地址
            compress:true,//是否启用服务器压缩
            port:8989
        }
  • 在 package.json 的 scripts 里写入全局变量方法："server":"webpack-dev-server --open"，然后直接npm run server
  • 注意，webpack3.5 版本以下不支持热更新
  • 使用 loader：打包 css 需要使用到 style-loader:安装 loader：npm install style-loader --save-dev，还需要 css-loader:cnpm install css-loader --save-dev
  • 在压缩前的 js 里引入 css：import css from './css/index.css';
  • 在 webpack.config.js 里 module 加入规则：
	module:{
            rules:[
                {
                    test:/\.css$/,
                    use:['style-loader','css-loader']
                    //loader:['style-loader','css-loader']
                    //use:[
	                   {
	                   loader:"style-loader"
	                   },{
	                   loader:"css-loader"
						}
	                   ]
                }
            ]
        }
  • JS 压缩:使用 webpack 自带的 uglify:webpack.config.js 里写入：const uglify = require('uglifyjs-webpack-plugin')然后在 plugins：new uglify()
  • HTML 文件的发布:cnpm install --save-dev html-webpack-plugin安装 HTML 打包插件
  • 引入const htmlPlugin = require('html-webpack-plugin');，plugins 写入：
new htmlPlugin({
                minify:{
                    removeAttributeQuotes:true
                },
                hash:true,
                template:'./src/index.html'
            })
  • dist 目录可以删除 执行 webpack 的时候可以自动打包生成
  • CSS 中引用图片（webpack 希望网页上所有的图片都以背景图片方式存在） cnpm install --save-dev file-loader url-loader安装需要的文件和 url 组件
      module:{
              rules:[
                  {
                      test:/\.(png|jpg|gif)/,
                      use:[{
                          loader:"url-loader",//url-loader自带file-loader的功能
                          options:{
                              limit:50000//单位为B，超过50K在目录下生成图片，小于50K生成BASE64图片编码
                              outputPath:'images/'  //输入以后的文件夹，这样会在dist里生成一个images文件夹

                          }
                      }]
                  }
              ]
          },
  • css 分离 什么是 css 分离？前面用了import css from './css/index.css'把 css 引入到 js 里并打包成 js，假设现在项目有一个小页面，交互不多，基本靠布局，那么这个页面现在只需要 index.css 这个文件，所以要把 css 从 js 分离出来 安装npm install --save-dev extract-text-webpack-plugin插件 引入插件：const extractTextPlugin = require('extract-text-webpack-plugin') module 下的 rules
      test:/\.css$/,
      use:['style-loader','css-loader']

换成

    test:/\.css$/,
                    use:extractTextPlugin.extract({
                        fallback:"style-loader",
                        use:"css-loader"
                    })

plugins 注册：new extractTextPlugin("css/index.css")

  • css 分离后可能导致图片不能显示，需要把路径改成绝对路径，配置一个 publicPath：
      var website={
          publicPath:"http://192.168.0.100:8989/"
      }

output 出口中配置：publicPath:website.publicPath

  • 如果局部安装了 webpack 怎么直接 webpack 打包？在 package.json 配置：
      "scripts": {
      "build":"webpack"}

然后直接npm run build即可

  • 如何打包 html 里的 img 标签？ 安装npm install --save-dev html-withimg-loader webpack.config.js 的 module>rules 里加入：
          {
                    test: /\.(htm|html)$/i,
                    use:[ 'html-withimg-loader']
                }

这样 html 的文件就会被打包了。

  • 打包和分离 less 安装 lessnpm install --save-dev less 安装 less-loadernpm install --save-dev less-loader 打包 less:webpack.config.js 的 module>rules 里加入：
  {
  test:/\.less$/,
  use:extractTextPlugin.extract({
  use:[{
  loader:"css-loader"
  },{
  loader:"less-loader"
  }],
  fallback:"style-loader"
  })
  }

  • 打包和分离 sass 安装 sass-loadernpm install --save-dev less-loader 配置方法和 less 基本一样 需要注意的是 test 写正则的时候，sass 的文件后缀是 scss，所以 test 正则需要写成 scss。

  • postcss 自动添加 css 属性前缀 安装 postcss-loader：npm install --save-dev postcss-loader 安装 autoprefixer（自动加前缀工具）：npm install --save-dev autoprefixer 在项目目录下新建postcss.config.js这是 postcss 的配置文件 在postcss.config.js里写入：

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

在 webpack.config.js 的 loader 里引入更改 css 打包规则：

    {
      test: /\.css$/,
      use: [
            {
              loader: "style-loader"
            }, {
              loader: "css-loader",
              options: {
                 modules: true
              }
            }, {
              loader: "postcss-loader"
            }
      ]}

简化写法：

{
    test: /\.css$/,
    use: extractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
        ]
    })
}
  • 用 webpack 消除未使用的 css 安装 purifycss 插件和依赖：npm i -D purifycss-webpack purify-css 配置全局搜索引导：const glob=require('glob') 加载 purifycssconst PurifyCSSPlugin = require('purifycss-webpack');//清除无用css webpack.config.js>plugins 里写入：
new PurifyCSSPlugin({
            paths:glob.sync(path.join(__dirname,'src/*.html'))//搜索html的DOM结构
        })

原理：搜索匹配 htmlDOM 里的所有类名和 id，然后对照 css 表里 没有使用的类名和 id 自动删除不加入 dist 的 index.css

  • Babel 转换 ES6 Babel 能转换 ES6 ES7 等 需要很多依赖包 分别是npm install -D babel-core babel-loader babel-preset-es2015 babel-preset-react 依次：babel 核心功能、babel 的 webpack 包、babel 解析 es2015 包、babel 解析 react 包 babel 官方说 babel 解析的 es2015 已经过时了，所以安装npm install -D babel-preset-env 在 webpack.config.js 里的 module>rules 加入
      {
                      test:/\.(jsx|js)$/,
                      use:{
                          loader:'babel-loader',
                      },
                      exclude:/node_modules/      //需要排除的文件夹 npm里的包不能去转换
                  }

然后在项目里新建一个文件专门用来配置 babel：.babelrc 在.babelrc里写入类 json 的对象

{
  "presets":["react","env"]//env代表所有的es版本 如果只解析es2015，则单独填入es2015即可。
}
  • 打包后的代码调试 webpack.config.js 里 module.exports 写入devtool:'source-map' devtool 有四种模式： source-map 打包速度最慢 会生成独立 map 文件 包括调试工具的行、列 cheap-moudle-source-map 打包速度快 会生成独立 map 文件 不包含列 eval-source-map eval 打包速度快 没有独立 map 包含行、列 缺点是有安全隐患 只能在开发环境使用 cheap-moudle-eval-source-map 打包速度快 没有列 只有行
    如何选择：开发阶段的时候，如果我们的项目比较大，使用 source-map 比较好 如果项目比较小 适合 cheap-moudle-suorce-map 不管哪种 在上线后我们都应该需要把代码调试关掉
Discuss on Twitter • View on GitHub
*/}