文章引用自：webpack打包配置
创建项目
npm init -y //快速生成package.json文件。
第一步
三大件
webpack 本身
webpack-cli webpack 脚手架
webpack-dev-server 开发者服务器
第二步
处理js ES6,7,8 装饰器等
babel-loader@7 目前用版本7，用于es的转换
babel-core
babel-preset-env
上面这三个用于转换ES6的，那么ES7,ES8呢，我们需要
babel-plugin-transform-runtime
我们还需要装饰器的转换，我们还需要两个转换
babel-plugin-transform-decorators
babel-plugin-transform-decorators-legacy
第三步
处理Sass->css->style
我们写css一般用sass来做，然后我们就需要生成css然后再话到内部样式表中
sass-loader
node-sass
css-loader
style-loader
另外我们还可以安装
postcss-loader
autoprefix
我们有些css需要加前缀，需要处理，就可使用这两个包
第四步
处理模板
ejs-loader //处理ejs,tpl等后缀模板，我们可在配置文件中配置
第五步
处理html
html-webpack-plugin
可以压缩html ,也可以增加trunk:css引用文件
开始安装
npm i
--save-dev 安装在开发环境下，如转es6的工具，上线之后是不需要的，简写：-D
--save 安装在生产环境下，在生产环境依然需要使用，如ejs等，简写：-S
--registry=https://registry.npm.taobao.org 切换淘宝源
npm i -D webpack webpack-cli webpack-dev-server babel-loader babel-core babel-preset-env babel-plugin-transform-runtime babel-plugin-transform-decorators babel-plugin-transform-decorators-legacy sass-loader node-sass css-loader style-loader ejs-loader html-webpack-plugin --registry=https://registry.npm.taobao.org
cnpm i -D webpack webpack-cli webpack-dev-server babel-loader babel-core babel-preset-env babel-plugin-transform-runtime babel-plugin-transform-decorators babel-plugin-transform-decorators-legacy sass-loader node-sass css-loader style-loader ejs-loader html-webpack-plugin
cnpm i -D webpack webpack-cli webpack-dev-server babel-loader@7 babel-core babel-preset-env babel-plugin-transform-runtime babel-plugin-transform-decorators babel-plugin-transform-decorators-legacy sass-loader node-sass css-loader style-loader ejs-loader html-webpack-plugin
添加配置
webpack.config.js
这个文件是导出一个对象，所以module.exports={}
const HtmlWebpackPlugin = require('html-webpack-plugin'),//导入插件
path = require('path');//用于获取路径
module.exports = {
mode:'development', //development,production 生产环境会去除注释等
entry:, //如果多入口，可以使用{}对象写，如果是单入口，直接写即可，html对应
output:{
path:, //打包后路径，一般我们用/dist
filename:'js/[name].js', //生成的文件名
},
module:{
rules:[ //我们在上面安装的库，如何使用，在这里定义规则，一个规则就是一个对象{}
{
//翻译：匹配test正则出的文件名，要使用什么样的loader,观察我们的上面npm安装的库，有非常多的loader
test:/\.js$/, //.js结尾的
loader:'babel-loader',
//由于依赖都在node_modules，我们不会更改，里面也有非常多js文件，我们不需要把它们执行规则，我们就可以把它们排除出去。你babel-loader不要去node_modules编译。
exclude:
},
//css
{
test:/\.css$/, //css结尾的，需要什么loader
//loader:
use:[
]
//如果loader是多个的话，我们就不能用loader了，就需要用use数组
},
//sass
{
test:/\.scss$/, //
use:[
]
},
//模板
{
test:/\.tpl$/, //模板名字，我们可以自定义，当然一般用tpl
loader:
}
]
},
plugins:[ //实例数组
new HtmlWebpackPlugin({})
],
//配置webpack-dev-server,常用下面三个配置。
devServer:{
open:true,//当我启动server时，自动打开浏览器
host:'localhost',
port:3300
}
}
一般的来说，我们下载的库,loader(名字中包含loader的包)都不需要导入，而plugin一般需要导入。
如 const HtmlWebpackPlugin = reqire('html-webpack-plugin');
我们在plugin块中，可以直new ，插件就是一个构造函数，我们直接 new即可。
const HtmlWebpackPlugin = require('html-webpack-plugin'),
path = require('path');
module.exports = {
mode:'development',
entry:{
index:path.resolve(__dirname,'./src/js/index.js'),
},
output:{
path:path.resolve(__dirname,'./dist'),
filename:'js/[name].js',
},
module:{
rules:[
{
test:/\.js$/,
loader:'babel-loader',
exclude:path:path.resolve(__dirname,'node_modules')
},
{
test:/\.css$/,
use:[
//顺序不可改，因为执行是倒序的，执行需要按现在倒序的顺序执行。
'style-loader',
'css-loader'
]
},
{
test:/\.scss$/,
use:[
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test:/\.tpl$/,
loader:'ejs-loader'
}
]
},
plugins:[
new HtmlWebpackPlugin({
//打包后的filename是什么
filename:'index.html',
template:path.resolve(__dirname,'./src/index.html'),
chunks:[
'index',//如果有jquery,
],
excludeChunks:['node_modules']//排除
})
],
devServer:{
open:true,
host:'localhost',
port:3300
}
}
运行
我们现在已经配置完了，我们可以把配置放在package.json中进行工作了。
我们可以在package.json的scripts下面放上脚本：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.config.js",
"webpack":"webpack --config webpack.config.js"
},
之后执行
//运行server
npm run dev
//打包
npm run webpack
网友评论