webpack入门级水坑

1、webpack+vue

在vue项目中配置webpack的入门级配置项（至于node那些安装不说了）

2、初始化

输入初始化命令，生成package.josn文件

npm init

3、安装依赖包(node_module)

生成初始化的module

npm install

4、配置webpack

在vue项目中建立一个webpack.config.js文件，在这里配置webpack的一些配置，如entry，output，module>rules等等

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: path.join(__dirname, 'src/main.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        loader: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        loader: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(gif|jpg|jpeg|png|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024,
              name: '[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

Tips 注意使用vue-loader的时候，须要引入VueLoaderPlugin插件，不然报错
rules里面配置的就是解析各类文件的loader配置，要解析什么文件，就给配置对应的name-loader配置
plugins里面就是配置插件用的

5、webpack配置服务器

使用webpack-dev-server来配置开发环境运行

npm install webpack-dev-server

Tips：
正常在package.json文件里面生成环境打包，是经过webpack --config webpack.config.js
而在开发环境下，须要经过webpack-dev-server来本地运行，webpack-dev-server --config webpack.config.js
在package.json中配置以下：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --config webpack.config.js"
}

既然运行不一样的环境，天然就须要配置环境变量来判断当前的运行环境，cross-env

npm install cross-env

安装这个环境切换变量，主要是解决mac和window的运行解析，由于window须要加一个set才能弄，而mac能够直接运行上面的scripts

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
}

获取当前环境变量：

process.env.NODE_ENV

判断当前环境变量：

const isDev = process.env.NODE_ENV === 'development'

若是是开发环境，则配置开发环境的属性，这个属性是webpack2.0增长的，以前没有

if (isDev) {
  config.devServer = {
    port: 8888,
    host: '0.0.0.0', // 这个配置成这个，不要配置127.0.0.1，在vue 3.0里面好像会致使IP没用
    overlay: {
      errors: true // 编译出错在网页上显示错误
    }
  }
}

6、配置HTML输出插件

npm install html-webpack-plugin

在webpack中引用

const HTMLPlugin = require('html-webpack-plugin')
plugins: [
    new HTMLPlugin()
]

7、vue，react必须插件

plugins:[
    new webpack.DefinePlugin({ // 添加环境变量
        process.env: {
            NODE_ENV: isDev ? '"development"' : '"production"'
        }
    })
]

8、开发环境热重载

config.devServer = {
    hot: true
}
// 往插件数组里追加两个热重载辅助插件
config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
)
// 追加source-map代码调试工具
config.devtool = '#cheap-module-eval-source-map'

Tips eval和source-map是两个不一样的调试工具