webpack 安装总结
1、处理html和js文件插件$ npm install html-webpack-plugin --save-dev
安装成功后,package.json
这个文件会多出一行 "html-webpack-plugin": "^2.30.1",
,如下所示:
{
"name": "hello-wepback",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack -d --watch",
"prod": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.8.1"
}
}
webpack.config.js
内容大约是下面这样的:
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true,
},
hash: true,
})]
};
2、处理css和scss文件插件,这个插件是把js和css混合到一个文件当中.注意 css文件是在js中使用import引入的
$ npm install --save-dev css-loader style-loader 处理css 要安装的
$ npm install sass-loader node-sass --save-dev 处理sass要安装的
webpack.console.js文件配置
module: { rules: [ {
test: /\.scss$/,
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
} ] }
3、css和js文件分离插件
npm install --save-dev extract-text-webpack-plugin
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true,
},
hash: true,
}),
new ExtractTextPlugin('style.css')
],
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader', 'sass-loader']
})
}
]
}
};