webpack 中的一些扩展

打包html插件及配置 :

cnpm i --save-dev html-webpack-plugin

 

plugins:[
      new HtmlWebpackPlugin({
        template:'./src/index.html'
      })
  ],

css-loader的安装及配置：

 

npm install --save-dev css-loader

1  module: {
2     rules: [
3       {
4         test: /\.css$/i,
5         use: ['style-loader', 'css-loader'],
6       },
7     ],
8   },

 style-loader的安装及配置：

cnpm install --save-dev style-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

vue-loader的安装及配置：

cnpm install vue --save //这个是安装vue

cnpm install -save vue-loader vue-template-compiler  //这个是安装VueLoaderPlugin插件及template

注意：Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，请确保在你的 webpack 配置中添加 Vue Loader 的插件：

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },

//因为我们的vue是仅运行时版本；模板编译不何用；所以得在配置resolue

resolve:{
  //alias(译：别名)
  // extensions:['.js','.css','.vue'],//表示调用文件时需要省去的后缀
  alias:{
    'vue$':'vue/dist/vue.esm.js'
  }
},

plugins: [ // 请确保引入这个插件！ new VueLoaderPlugin() ]

 babel-loader的安装及配置：

cnpm install --save-dev babel-loader@7 babel-core babel-prese
t-es2015

{//exclude(译：排除)；include(译：包含)
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },

 js压缩的Plugin及配置：

cnpm install uglifyjs-webpack-plugin@1.1.1 --save-dev

//导入
const UglifyjsPlugin = require('uglifyjs-webpack-plugin')

module.export = {
    plugin:[
      new UglifyjsPlugin()



   ]


}

 合并配置插件:

cnpm install webpack-merge --save-dev

const UglifyjsPlugin = require('uglifyjs-webpack-plugin')
//导入
const baseConfig = require("./baseConfig") //这路径是放置公共文件的路径
const webpackMerge = require("webpack-merge")

module.exports = webpackMerge(baseCofig,{
      plugins:[
         new UglifyjsWebpackPlugin()

]


})


1.注意:这个示例表示的是将原来webpack.config.js中的文件做了一个抽离：
       意思是将里面开发时用到配置和生产时用到的配置做一个分离；比如上面这个示例是将webpack.config.js中的 UglifyjsPlugin配置放到了另一个文件夹 
       因为他在最后生产时才能用到（它的作用是最后生产时压缩所有的js文件）
       那最后怎么将他和webpack.config.js联系起来呐；就是我们上面的代码(也就是通过刚刚装的那个插件)

2.还要说明的一点就是baseCofig；  这个js文件其实也是新建的用来存放开发和生产时公用的配置；其实最后是合并到这个文件中的；而

webpack.config.js最后删掉的

3.最后要提的是还要在package.json的脚本中配置baseCofig这个文件：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",  //在这里配置指定执行文件的路径；./build/prod.config.js"这个路径是生产时所用的文件路径

    "dev": "webpack-dev-server --open" },  //这个里面本来还要配置开发时用到的文件路径;这里我没写