webpack入门级水坑

一、webpack+vue

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

二、初始化

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

npm init

三、安装依赖包(node_module)

生成初始化的module

npm install

四、配置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里面就是配置插件用的

五、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 // 编译出错在网页上显示错误
    }
  }
}

六、配置HTML输出插件

npm install html-webpack-plugin

在webpack中引用

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

七、vue，react必须插件

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

八、开发环境热重载

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是两个不同的调试工具

转载于:https://www.cnblogs.com/zjh-study/p/10812249.html