webpack基础

1.全局安装webpack
#cnpm i webpack -g
2.初始化项目
#npm init
3.局部安装webpack
#cnpm i webpack --save-dev
4.打包文件
#webpack 要打包的文件的路径 打包完的文件的路径
5.该变webpack设置文件
#webpack --config 新的设置文件名
6.要打包css文件
#// 在打包的入口文件中 require(css文件路径)
7.要使webpack认识css文件
#cnpm i css-loader --save-dev
#// 在入口文件中,require('css-loader!css文件路径')
8.要使html能使用打包后的css文件
#cnpm i style-loader --save-dev
#// 在入口文件中，require('style-loader!css-loader!css文件路径')
9.webpack.config.js参数作用
#entry // 指定入口文件，可以是一个数组，也可以是一个对象
#output // 指定输出路径，filename指定输出文件名，也可以是相对输出路径的路径，path指输出路径
// filename可以在entry为对象的时候为每个入口文件打包对应的输出文件，使用占位符[name]可以得到按照对象键名命名的文件
// 还有[hash] 当文件发生改变时才会改变
10.使用webpack插件自动打包html文件
#cnpm i html-webpack-plugin
// 在webpack配置文件中 var htmlWebpackPlugin=require('html-webpack-plugin');
// 在plugins中设置
/* plugins:[
new htmlWebpackPlugin({
template: 'index.html',// 指定html模板，
filename: 'index-[name].html',// 指定名称
inject: 'head',// 指定插入script标签的标签
title: 'hello',// 可以使用ejx设置模板中的title或其它变量，在模板中使用<%= htmlWebpackPlugin.options.title%>
minify: {
removeComments: true,// 删除注释
}
})
]
*/
11.多页面应用
// 再次调用new htmlWebpackPlugin
// 在plugins中设置
/* plugins:[
new htmlWebpackPlugin({
template: 'index.html',// 指定html模板，
filename: 'index-a.html',// 指定名称
inject: 'head',// 指定插入script标签的标签
title: 'hello',// 可以使用ejx设置模板中的title或其它变量，在模板中使用<%= htmlWebpackPlugin.options.title%>
minify: {
removeComments: true// 删除注释
},
chunks: ['main','b'] // 可以指定打包后的文件
})，
new htmlWebpackPlugin({
template: 'index.html',// 指定html模板，
filename: 'index-b.html',// 指定名称
inject: 'head',// 指定插入script标签的标签
title: 'hello',// 可以使用ejx设置模板中的title或其它变量，在模板中使用<%= htmlWebpackPlugin.options.title%>
minify: {
removeComments: true// 删除注释
},
chunks: ['b'] // 可以指定打包后的文件
})，
new htmlWebpackPlugin({
template: 'index.html',// 指定html模板，
filename: 'index-c.html',// 指定名称
inject: 'head',// 指定插入script标签的标签
title: 'hello',// 可以使用ejx设置模板中的title或其它变量，在模板中使用<%= htmlWebpackPlugin.options.title%>
minify: {
removeComments: true// 删除注释
},
chunks: ['a','b'] // 可以指定打包后的文件
})，
new htmlWebpackPlugin({
template: 'index.html',// 指定html模板，
filename: 'index-d.html',// 指定名称
inject: 'head',// 指定插入script标签的标签
title: 'hello',// 可以使用ejx设置模板中的title或其它变量，在模板中使用<%= htmlWebpackPlugin.options.title%>
minify: {
removeComments: true// 删除注释
},
excludeChunks: ['a']// 除了a都引入
})，
]
*/
12.loader
// 在module属性中设置
/*
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',// 需要npm安装
query: {// 传递参数，也可以在package.json中指定
presets: ['latest']// 一些插件
},
exclude：'./node_modules/',// 不处理这些文件
include: './src/'// 只处理这些文件
},
{
test: /\.css$/,
loader: 'style-loader!css-loader!postcss-loader'//处理css文件
// 或loaders: [style-loader,css-loader,postcss-loader]
// 当有css文件需要@import引入的时候
// loader: 'style-loader!css-loader?importLoaders=1!postcss-loader'
// 1代表在css-loader之后使用1个loader处理引入的资源
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!postcss-loader!less-loader'// less文件的@import是不需要import-loader
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!postcss-loader!sass-loader'// sass文件的@import是不需要import-loader
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpg)$/i,// i代表不区分大小写
loader: 'file-loader'
}
]
}
*/
13.在模板中使用图片的相对地址的方法
# ${require(相对地址)}