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