webpack配置与遇到的问题

最近玩了一下webpack,使用了一些基本的打包工具以及热更新插件。

webpack配置出错:

Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

解决方法:

1、删除全局webpack并在本地安装

1
2
npm uninstall -g webpack 
npm install --save-dev html-webpack-plugin webpack webpack-dev-server

2、将全局webpack链接到项目的节点模块。这个缺点是项目将被迫使用最新的webpack(这只会在某些更新不兼容时才会产生问题)

1
2
npm i webpack -g
npm link webpack --save-dev

webpack.config.js 生产模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 自动生成html文件
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清除项目多余文件
const Uglifyjs = require('uglifyjs-webpack-plugin'); // 打包时除去多余的js文件
const webpack = require('webpack');
const Extract = require('extract-text-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // 一款分析 bundle 内容的插件及 CLI 工具,以便捷的、交互式、可缩放的树状图形式展现给用户。
const autoprefixer = require('autoprefixer');
const CopyWebpackPlugin = require('copy-webpack-plugin'); // 复制目录文件并打包

module.exports = {
entry: {
main: './src/index.js' // 不被打包影响的文件
},

output: {
filename: '[name].[chunkhash].js', // 根据chunkPlugin 生成文件名
path: path.resolve(__dirname, 'dist')
},

devtool: 'soure-map',

devServer: {
contentBase: './dist'
},

plugins: [
new CleanWebpackPlugin(['dist']),
// new Uglifyjs({ // js代码压缩
// sourceMap: true
// }),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new HtmlWebpackPlugin({
title: 'awesome webpack',
template: './index.html'
}),
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime'
}),
new Extract('[name].min.css'),
new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}]),
new BundleAnalyzerPlugin()
],

module: { // 打包文件处理
rules: [
{
test: /\.css$/,
use: Extract.extract({
use: [ // css autoprefixer
{
loader: 'css-loader?minimize'
},
{
loader: 'postcss-loader',
options: {
plugins() {
return [
require('precss'),
require('autoprefixer')({
browsers: [
'>1%',
'last 2 versions',
'Firefox ESR',
'ie >= 8'
]
})
]
}
}
}
]
})

},
{
test: /\.(png|jpg|svg|gif)$/,
use: ['file-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)/,
use: ['file-loader']
},
{
test: /\.(csv|tsv)$/,
use: ['csv-loader']
},
{
test: /\.(xml)$/,
use: ['xml-loader']
},
{ // 转译es6语法
test: /\.js$/,
loader: 'babel-loader'
}
],
}
}

webpack.dev.js 开发模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
entry: {
app: './src/index'
},

devtool: 'inline-soure-map',

devServer: {
contentBase: './dist'
},

plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Production',
template: './index.html'
}),
new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}])
],

output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},

module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg|svg|gif)$/,
use: ['file-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)/,
use: ['file-loader']
},
{
test: /\.(csv|tsv)$/,
use: ['csv-loader']
},
{
test: /\.(xml)$/,
use: ['xml-loader']
}
]
}
}
坚持原创技术分享,您的支持将鼓励我继续创作!