从零开始,使用 Webpack 搭建 ES6 开发环境。
npm init -y
npm install webpack webpack-cli --save-dev
npm install babel-loader @babel/core @babel/preset-env --save-dev
npm install css-loader style-loader --save-dev
npm install html-webpack-plugin --save-dev
- project [ 根目录 ]
– node_modules [ 项目中的依赖存放目录 ]
– public [ 静态资源文件目录 ]
– src [ 项目源文件目录 ]
– dist [ 打包文件目录 ]
– webpack.config.js [ webpack配置文件 ]
– package.json [ NPM包管理配置文件 ]
- ...
- ...
在 public 目录下,创建 index.html,该文件为项目的默认首页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
在 src 目录下,创建 index.js,该文件为项目的入口文件,在此文件中可以编写 ES6 代码。
在项目的根目录下创建 webpack.config.js 配置文件,依次完成以下配置:
-
配置入口(entry)
module.exports = { entry: './src/index.js' }
-
配置出口(output)
const path = require('path'); module.exports = { //... output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js' } }
-
配置加载器(loader)
module.exports = { module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.js?$/, // js 或 jsx 文件的正则 exclude: /node_modules/, // 排除 node_modules 文件夹 use: { // loader 是 babel loader: 'babel-loader', options: { // babel 转义的配置选项 babelrc: false, preset: [ [require.resolve('@babel/preset-env'), {modules: false}] ], cacheDirectory: true } } } ] } }
-
配置插件(plugin)
const HtmlWebPackPlugin = require('html-webpack-plugin'); module.exports = { // ... plugins:[ new HtmlWebPackPlugin({ template: 'public/index.html', filename: 'index.html', inject: true }) ] }
npm install webpack-dev-server --save-dev
module.exports = {
// ...
devServer: {
contentBase: './dist',
host: 'localhost',
port: 8888
}
}
{
"scripts": {
"start": "webpack-dev-server --mode development --open"
}
}
npm start
{
"scripts": {
"build": "webpack --mode production"
}
}
npm build