webpack 构建一个项目
5.打开 package.json 在 script 文件中加入命令行"build":“webpack”,此时运行 npm run build 就能把在根目录看到一个 dist 文件夹 6.如果想看打包效果,需要安装插件 npm install html-webpack-plugin,在 webpack.config.js 先头部引入 const HTMLWebpackPlugin=require
//这里是关于 webpack 构建项目示例
1.新建一个文件夹如 myWebpack1.0
2.cd 进入文件夹,初始化 npm init -y
3.安装 webpack,npm install webpack --save-dev npm install webpack-cli --save-dev
4.在根目录下新建 src 文件夹,写入一个 index.js 启动文件和 index.html 启动文件 5.在根目录下新建 webpack.config.js,在里面写入一下字段
const path=require('path')
moudles.exports={
entry:"./src/index.js",
output:{
path:path.resolve(\_\_dirname,'dist')
filename:'bandle.js'
}
}
5.打开 package.json 在 script 文件中加入命令行"build":“webpack”,此时运行 npm run build 就能把在根目录看到一个 dist 文件夹 6.如果想看打包效果,需要安装插件 npm install html-webpack-plugin,在 webpack.config.js 先头部引入 const HTMLWebpackPlugin=require(‘html-webpack-plugin’),然后在 exports 对象内新建
plugins:[
new HTMLWebpackPlugin({
template:'./src/index.html'
})
]
6.想要在我们改动项目的时候,浏览器能够实时监控,进行刷新,那么我们就可以安装 webpack 开发服务器,npm install webpack-dev-server -D
然后在 package.json 在 script 文件中加入命令行"start":“webpack --server --open”,这样输入 npm run start 就能打开浏览器观察项目
7.为了避免每重新打包后,残留旧文件,需要安装一个插件 npm install clean-webpack-plugin -D,然后在 webpack.config.json 中引入 const {CleanWebpackPlugin}=require(‘clean-webpack-plugin’),在 plugins 中写于 new CleanWebpackPlugin()
8.如果项目中有使用 import 引入模块操作, 那么在 webpack.config.js 的 exports 中加入
resolve{
extensions:['.js']
}
9.对于模块文件如何进行处理,可以在配置文件中添加如下配置,前提,这些 loader 已经进行了安装。在 webpack.config.js 的 exports 中写入
moudle:{
rules:[
{
test:/\.css$/,
use:[
{
loader:"style-loader",
},
{
loader:"css-loader"
}
]
}
]
}
10.告诉 webpack 打包时不使用箭头函数,因为 ie 不兼容
在 output 中加入
enbviroment:{
arrowFunction:false
}
11.争对不是所有的浏览器都能解析 es6,所以要使用插件 babel loader 转化。npm i babel-loader @babel/core @babel/preset-env -D,在moudles中添加
{
test:/\.js$/,
exclude:/node_modules/,
use: {
loader:"babel-loader",
},
options{
preset:["@babel/preset-env"]
}
}
但是这样直接可能打包会失败 因为目前还解析不了我们的 async/await 语法,安装 regeneratorRuntime 插件,npm i @babel/runtime -D 和 npm i @babel/plugin-transform-runtime 在刚刚的 options 中再加入
plugins:[ // 设置编译的插件
[‘@babel/plugin-transform-runtime’] //设置编译的规则
更多推荐
所有评论(0)