第一次写文章，写得不到位的，别骂这么狠，会心凉的，欢迎讨论，觉得可以的可以点赞哦！
webpack现在入门已经不难了， 但是总有配置的时候遇到一些问题，所以我就针对我最近在活动页面使用webpack构建打包作为入门学习
1、安装
npm install --save-dev webpack
然后在package.json里面
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},接着在package.json同级目录建立一个webpack.config.js，然后npm run build完成这一步说明你已经可以运行webpack构建工具了，这是webpack推荐的哦，报错也是正常的呀，因为啥都没有配置，不着急。
2、配置
配置webpack是最重要的一部分
打开webpack.config.js
webpack的核心四件套
- entry：入口，就是输入你想要打包的内容
- output：输出，就是输出被已经webpack打包过的静态页面内容
- module：模块，这里配置wbepack在构建过程中需要用一些loader去转化项目中不能被webpack认可的东西
- plugins：插件，webpack的module不可能方方面面都搞的定，所以就需要依赖插件
那么webpack.config.js如何写配置
首先在文件目录里面创建src如下，顺便看看，你跟我的不一样，那需要改改啦
const path=require('path');
const webpack=require('webpack');
module.exports={
entry:{ //入口，就是输入你想要打包的内容
app:'./src/js/index.js' //app就是你文件即将被打包后的名字,后面是的文件目录
},
output:{//输出，就是输出被已经webpack打包过的静态页面内容
path:path.resolve(__dirname,'dist'),//输出的文件的静态的绝对路径,
filename: "js/"+"[name][hash].js",//这个是输出的js的名字叫什么,存放在哪里
},
module:{
},
plugins:[
],
};
然后直接的复制我的代码进去webpack.config.js里面
或者自己去敲，
然后npm run build
是不是出来了一个dist文件夹
为什么只有js，因为我们还没有配置css的转化的呢，那没有html这个dist有什么用呢，额，不需要我们自己创建，webpack会帮我们弄的，一步步来呀
下面我们需要把css给打包出来了
首先
npm install --save-dev style-loader css-loader
loader是什么？
loader是用来转化我们代码中不能给webpack直接打包的工具
装了之后呢，那就配置呀
但是第一步
在html里面写个div
在css/index.css里面写点样式关于div的
去到index.js里面引入css先，因为你打包的是index.js，webpack的依赖会自动把你在index.js
里面的文件给静态打包依赖过去，稳得很
顺便在js里面写点代码console.log('hello webpack')之类的
然后去webpack.config.js里面配置一下cssloader
module:{
rules:[
{
test:/\.css$/,
use:[
{
loader:"style-loader"//这里有个小坑,style-loader要放在上面,因为是要解析loader
},
{
loader:"css-loader"
}
]
}
]
},然后把dist文件删了
接着在npm run build
在打包出来的文件里面是不是找了你写的样式
但是这样没什么用呀，就一个js，html都没有，马上就有，然后打包一次还要删除一次dist文件，要webpack有啥用
现在立马
npm install --save-dev html-webpack-plugin //这个插件会自动帮我们生成一个html的文件不需要我们自己动手
npm install --save-dev clean-webpack-plugin//这个插件会自动删除我们之前生成的dist文件
然后在webpack.config.js里面
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry:{ //入口，就是输入你想要打包的内容 app:'./src/js/index.js' //app就是你文件即将被打包后的名字,后面是的文件目录
},
output:{//输出，就是输出被已经webpack打包过的静态页面内容
path:path.resolve(__dirname,'dist'),//输出的文件的静态的绝对路径,
filename: "js/"+"[name][hash].js",//这个是输出的js的名字叫什么,存放在哪里
},
plugins: [
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'src/index.html'),//引入html的模板就是你index.html的路径
}),
new CleanWebpackPlugin(['dist'])//选择你要删除的文件路径
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
}
]
}
]
},
devServer: {}
};然后npm run build
这次是不是想要的全都有了
运行一下index.html
样式和js的代码全都进去了
稳稳的对不对
这就完了那还玩个啥
3、继续入门一下webpack---loader和插件篇让你知道webpack基本怎么玩
1、图片loader
npm install --save-dev url-loader file-loader //这个是处理图片引用的东西啦 url-loader 就是基于file-loader开发的,那就是比file-loader更加方便哦,厉害哦!!!!
npm install --save-dev html-withimg-loader //这个是用来处理html里面<img src=''>引用问题的哦
我们继续回到webpack.config.js配置一下图片的引用
首先先在css/index.css里面background一下东西先
然后再去html里面<img src=''>一下
去webpack.config.js配置一下你的loader
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry:{ //入口，就是输入你想要打包的内容
app:'./src/js/index.js' //app就是你文件即将被打包后的名字,后面是的文件目录
},
output:{//输出，就是输出被已经webpack打包过的静态页面内容
path:path.resolve(__dirname,'dist'),//输出的文件的静态的绝对路径,
filename: "js/"+"[name][hash].js",//这个是输出的js的名字叫什么,存放在哪里
},
plugins: [
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'src/index.html'),
}),
new CleanWebpackPlugin(['dist'])
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
}
]
},
{
test:/\.(png|jpg|gif)$/,
use:[
{
loader:'url-loader',
options: {
limit: 8192,//限制图片的大小
useRelativePath:false,//添加相对路径(这个坑挖了有点久，这个会自动创建一个跟原来路径一下的东西)
publicPath:'',//输出图片要不要主动添加一个前缀路径
outputPath:'images/'//修改输出背景图片的路径东西,添加这个就好
}
}
]
},
{
test: /\.(htm|html)$/i,
use:[
{
loader: 'html-withimg-loader'//自动搞定所有的img引入问题
}
]
}
]
},
devServer: {}
};然后再npm run build
打开dist/index.html
是不是稳了
2、压缩js代码
这个更加简单
webpack本身就自带压缩插件的
plugins: [
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'src/index.html'),
}),
new webpack.optimize.UglifyJsPlugin({ //就是这个啦,放进去就行了,
compress: {
warnings: false
}
}),
new CleanWebpackPlugin(['dist'])
],npm run build
代码被压缩了,图片也被处理了哦
3、分离css样式
样式被打包到js里面真的很不好呢
npm install --save-dev extract-text-webpack-plugin去到webpack.config.js里面
添加这个
const ExtractTextPlugin = require("extract-text-webpack-plugin");修改解析css的loader
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({ //改成这个样子稳稳哒
fallback: "style-loader",
use: "css-loader"
})
},
{
test:/\.(png|jpg|gif)$/,
use:[
{
loader:'url-loader',
options: {
limit: 8192,
// useRelativePath:true,
outputPath:"images/"
}
}
]
},
{
test: /\.(htm|html)$/i,
use:[
{
loader: 'html-withimg-loader'
}
]
}
]
},plugins里面添加这个
plugins: [
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'src/index.html'),
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new CleanWebpackPlugin(['dist']),
new ExtractTextPlugin("css/[name].css"),//用于分离css样式的
],不开熏呀,分离出来的样式居然还有路径的问题,
{
test:/\.(png|jpg|gif)$/,
use:[
{
loader:'url-loader',
options: {
limit: 8192,
useRelativePath:true,//加上这个就好了
outputPath:"images/"
}
}
]
},现在就没有啦，很棒棒呢！啦啦啦
样式也给我分离出来了呢
这个就是我们需要的啦
太晚了，明天要继续吃灰，我会继续更新的，第一次写文章，写完之后，希望可以别骂这么狠，有人跟我说，写来干嘛，这个东西对着写就好了，写一次用一年，当时听了之后凉了好久
总觉得会帮助到人，会继续写，我觉得我这个很棒
webpack版本是3.10.0最新的
