开始
现在开始创建项目了,安装node什么的一大堆我就不说了,网上很多,我这里使用的是node版本v10.15.0,yarn的版本是v1.12.3。
初始化webpack
首先在创建的目录下面执行
yarn init -y
yarn add webpack webpack-cli -D
我这里使用的版本是webpack4.29.0,然后在目录下创建webpack.config.js这个文件,在根目录下创建src文件夹public文件夹,src下创建index.js,public下创建index.html。然后在index.js里写个alert(1);。等下我们来运行这个代码。
目前的目录结构如下
babel
接下来就是babel了,babel这个地方那可是真复杂啊,这里说的不是难,是复杂,各个版本的babel和很多很多的js兼容babel,我在学这块的时候那头发都掉一大把。我在这个项目里用的是babel7,接下来实现在网页上运行js。
首先执行
yarn add babel-loader @babel/core @babel/preset-env -D
这里有个疑问,为什么有的babel前面有个@呢?因为这是babel7的标志,babel6是没有的,这里要注意不同版本的babel不要混用了。
然后再执行,这样js就可以自动引入到html文件里了。
yarn add html-webpack-plugin -D
进入到webpack.config.js里,写入下面代码
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports={
entry:['./src/index.js'],
output:{
filename:'js/bundle.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test:/\.(js)$/,
use:[
{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env'
]
}
}
]
}
]
},
plugins: [
new HTMLWebpackPlugin({
template:'./public/index.html',//模板
filename:'index.html',//生成的html文件的名字
minify:{
removeAttributeQuotes:true,//删除双引号
removeComments:true,//删除注释
collapseWhitespace:false//压缩代码
}
})
]
}
在控制台执行webpack命令,这个时候,控制台可能会有报错,这个错误主要是把node_modules里的代码也转化了。
我们在module下的rules里这样修改
rules:[
{
test:/\.(js)$/,
exclude: '/node_modules/',//添加这行
include:path.resolve(__dirname,'src'),//添加这行
use:[
{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env'
]
}
}
]
}
]
这样子再执行webpack就不会报错了。
执行webpack后发现app目录下多出了一个dist文件夹,这个是我们打包后的文件。打开index.html,发现打包后的js文件被自动引入了,运行index.html,成功运行代码。
最终目录结构如下:
结尾
现在最简单的一个webpack配置已经做好了,当然我前面说babel复杂,当然不止现在这些,后面还需要再进行配置。
(ps:webpack里一些太基础的配置没有细讲了,如果有需要可以去参考webpack官网,也可以在评论里提出。如果写的不好,请多担待,谢谢)