webpck踩坑记录

1 启用webpack-dev-server
需要注意版本问题：已知正常运行版本

"webpack": "4.44.2",
 "webpack-cli": "3.3.5",
 "webpack-dev-server": "^3.1.4"

2 webpack-dev-server如何配置呢？
解决办法：我们需要在webpack.config.js文件中作如下设置：
  devServer:{
    contentBase:path.join(__dirname,"dist"),
    compress:true,
    port:9000
  },

3 如何增加对vue文件的支持？？
  
  解决方案：loader的处理+VueLoaderPlugin插件，
也就是我们要在webpack config.js文件中做如下设置

const VueLoaderPlugin =require("vue-loader/lib/plugin")
  module:{
    rules:[
     {
        test:/\.vue$/,
        loader:"vue-loader",
      },
    ]
 },
 plugins:[
    new VueLoaderPlugin()
 ]
特别注意VueLoaderPlugin()的引入路径是
const VueLoaderPlugin =require("vue-loader/lib/plugin")同时要注意vue-loader版本，如果是16以上版本，那么会报错找不到vue-loader/lib/plugin，

也就是vue-loader的文件中没有lie文件夹。需要把vue-loader版本降级为15.9.5。特别注意。
 
4  如何增加对es6的支持？？
 解决办法：安装如下babel配置。特别注意版本问题：默认安装babel是8.0版本
这需要babel-core的版本与之匹配，否则会报错。
目前已经可以正常运行的版本如下
 "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "7.1.5",
    "babel-preset-env": "^1.7.0",   

5 如何在package.json中配置script命令，（dev或者start）,自动根据该指令执行
开发环境。生产环境任务？
解决办法：在package.json中作如下配置：
"build": "cross-env NODE_ENV='production' webpack --config ./webpack.config.js",
 "dev": "cross-env NODE_ENV='development' webpack-dev-server --config ./webpack.config.js",
 "start": "cross-env NODE_ENV='development' webpack-dev-server --config ./webpack.config.js"

注意：如果不加cross-env 那么在window下是无法识别NODE_ENV='development'和NODE_ENV='production' 
--config后面是webpack.config.js文件相对于当前文件，也就是package.json目录下的路径地址

6 如何抽离css，通过link方式引入打包以后的css文件？

此功能需要引入mini-css-extract-plugin插件。在webpack.cofig.js 做如下配置

const MiniCssExtractPlugin=require("mini-css-extract-plugin")

 module: {

        rules: [

            {

                test: /\.css$/,

                use: ["style-loader",MiniCssExtractPlugin.loader, "css-loader"],

            }

        ]

    },

plugins: [

        new HtmlWebpackPlugin({

            template: "./index.html",

            filename:"index.html",

            curEnv: process.env.NODE_ENV,

        }),

        new CleanWebpackPlugin({

            cleanOnceBeforeBuildPatterns: ["./dist"]

        }),

        new MiniCssExtractPlugin({

            filename:"css/[name].css"

        })

    ]

7如何把打包以后的js文件单独放置在js文件夹中？

只需要更改output配置即可，比如我们之前的output配置如下

output: {

        path: path.resolve(__dirname, "../dist"),

        filename: 'name].js'

    },

现在只需要做如下更改

output: {

        path: path.resolve(__dirname, "../dist"),

        filename: 'js/[name].js'

    },

6 如何根据不同环境让test环境下sourcemap，而production下直接压缩关闭sourcemap？

7 为什么配置了多入口，也配置了output的filename为【name】.js，但是打包以后是main.js文件而不是多个？

原因：没有配置npm的script的build命令:

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "webpack  --config ./webpack.config.js"

  },

 "build": "webpack  --config ./webpack.config.js"  其中--config必不可少。它表示给npm 的 config传入参数，后面紧跟的是config所在的路径