webpack入门级水坑

原文链接：http://www.cnblogs.com/zjh-study/p/10812249.html

一、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