webpack配置教程

一、npm脚本运行webpack与命令行输入webpack的区别  ： http://www.javashuo.com/article/p-sysafneo-eh.html

　  npm 模块的 安装 和 卸载  ： https://blog.csdn.net/yihanzhi/article/details/75665959

　  npm命令中，--save--dev --save的区别  ： https://blog.csdn.net/tjcjava/article/details/69257848 （只是在package.json中位置不同，其余的没有区别。nodejs运行是根据依赖树执行的，与package.json位置无关。若是每次安装都是npm install就更是彻底没有区别）

二、（bug）webpack@3.12.0版本，在命令行直接使用webpack就能够顺利打包，使用npm run webpack提示错误 ： 

　　暂时不知道什么缘由，从新安装 或者 换一个版本（好比 webpack@3.5.6）就没有这个问题了。

---

 

下面的参考：https://www.jianshu.com/p/90e1049a5677

三、生成Source Maps  ： 

module.exports = {
  devtool: 'eval-source-map',  // 这里配置下就能够
  entry:  __dirname + "/app/main.js",
  output: {}
}

四、使用webpack构建本地服务器 ： 安装包  webpack-dev-server

  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    host: "192.168.0.232", //本机的局域网ip //默认 域名：localhost ； 端口：8080
    open: true //是否运行成功后直接打开页面
  }

注意：webpack版本与webpack-dev-server版本有兼容问题的。

五、模块 — js转码器（Babel ） ：（webpack.config.js文件配置不少项时，配置文件会特别复杂。因此 babel的配置选项 能够放在一个单独的名为 ".babelrc" 的配置文件中）

核心的两个包：

npm install --save-dev babel-core babel-loader

注意：babel-core 版本与 babel-loader 版本有兼容问题的。（亲测，两个都是最新包都出现不兼容的问题，根据提示babel-core@6.* 和 babel-loader@7.*兼容使用）

　　a、es6 转码器 ： 安装包   babel-preset-env

  module: {
    rules: [ // webpack2.x 以后， 被  代替,参考：https://www.jianshu.com/p/11e52308421f
      {
        test: /\.js$/, // 匹配.js文件
        //排除也就是不转换node_modules下面的.js文件
        exclude: /(node_modules|bower_components)/,
        use:[{
          //加载器 
          loader: "babel-loader"
        }]
      }
    ]
  }loadersrules

　　b、JSX 转码器 ： 安装包   babel-preset-react

六、模块 — css转码器 ： （其余的配置，参考 https://www.jianshu.com/p/90e1049a5677）

核心的两个包：

css-loader  使你可以使用相似@import 和 url(...)的方法实现 require()的功能。
style-loader 将全部的计算后的样式加入页面中。

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

  module: {
    rules: [
      {
        test: /\.js$/, // 匹配.js文件
        //排除也就是不转换node_modules下面的.js文件
        exclude: /(node_modules|bower_components)/,
        use:[{
          //加载器 
          loader: "babel-loader"
        }]
      },
      { // 这里配置这两个工具
        test: /\.css$/,
        use: [ // 请注意这里对同一个文件引入多个loader的方法。
            {
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }
        ]
      }
    ]
  }

　　a、CSS预处理器

七、 插件（Plugins）— 根据html文件生成html文件： http://www.javashuo.com/article/p-pdhrzmke-be.html

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

  // 配置插件
  plugins: [
      // new webpack.BannerPlugin('版权全部，翻版必究')
      new htmlWebpackPlugin({
        filename:'index.html', //经过模板生成的文件名
        template:'index.html',//模板路径
        inject:true, //是否自动在模板文件添加 自动生成的js文件连接
        title:'这个是WebPack Demo',
        minify:{
            removeComments:true, //是否压缩时 去除注释
            // collapseWhitespace: true,
            // removeAttributeQuotes: true
        }
    })
  ]

　　

所有代码：

const webpack = require('webpack'); // 引入webpack

var htmlWebpackPlugin=require('html-webpack-plugin');

module.exports = {
  // source-map
  devtool: 'source-map',
  // 文件人口、存放
  entry: __dirname + "/app/main.js",//已屡次说起的惟一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  // 本地服务器
  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true, //实时刷新
    host:'localhost',
    port:9900
  },
  // 模块
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配.js文件
        //排除也就是不转换node_modules下面的.js文件
        exclude: /(node_modules|bower_components)/,
        use:[{
          //加载器 
          loader: "babel-loader"
        }]
      },
      { // 这里配置这两个工具
        test: /\.css$/,
        use: [ // 请注意这里对同一个文件引入多个loader的方法。
            {
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }
        ]
      }
    ]
  },
   // 配置插件
   plugins: [
    // new webpack.BannerPlugin('版权全部，翻版必究')
    new htmlWebpackPlugin({
      filename:'index.html', //经过模板生成的文件名
      template:'index.html',//模板路径
      inject:true, //是否自动在模板文件添加 自动生成的js文件连接
      title:'这个是WebPack Demo',
      minify:{
          removeComments:true, //是否压缩时 去除注释
          // collapseWhitespace: true,
          // removeAttributeQuotes: true
      }
    })
  ]
}

View Code

 八、webpack 处理 html 模块：https://blog.csdn.net/connie_0217/article/details/79747137 或 http://www.javashuo.com/article/p-pdhrzmke-be.html (推荐)

　　说明：webpack的人口文件是 js文件，根据依赖关系打包的。html 的打包是在 插件中处理的。

九、本身 配置的的webpack 项目框架。  https://github.com/kevin3623/webpack  

---

 webpack多页应用脚手架 ：https://www.jianshu.com/p/eadea5d27f0c

说明：这里eslint规则（能够根据须要关闭对应的 规则）

　　a、做者使用的是Linux系统，因此eslint会报错。解决方法：https://yq.aliyun.com/ziliao/572681

　　b、强制在对象和数组文字中一致地使用尾随逗号。修改方法：https://cloud.tencent.com/developer/section/1135595

（不推荐本身配置 脚手架)