1.搭建基础的结构框架
新建项目文件夹 myapp
在myapp根目录下初始化 npm init --yes
在myapp根目录下新建dist文件夹(用于存放编译好的东西),新建src文件夹(用于存放源代码)
2.安装webpack依赖
在myapp根目录下: npm install webpack webpack-cli webpack-dev-server --save-dev
3.构建基础代码结构
在myapp根目录下新建index.html(这是项目的入口html文件),引入bundle.js(这是编译好的代码文件,自动生成,无需创建)
如下:
myapp
在src目录下新建index.js文件,这是项目的入口文件,根据需要编写。本次测试,index.js内容如下
document.write("hello!This is webpack with HMR!");
4.配置webpack.config.js文件
在myapp根目录下新建webpack.config.js文件。webpack配置参数有五大要素:entry,output,module,plugins,mode
entry:项目的入口文件
output:编译好的输出文件
module:定义编译规则,哪种类型的文件对应用哪个loader
plugins:webpack插件
mode:模式,有两个值 分别是 "production" 和"development"
这次只用到entry,output,mode。还需追加devServer参数配置,因为需要项目运行在本地服务器上,采用基于express框架的webpack-dev-server,为达到热更新的效果,需要配置hot参数。
const path = require("path");
module.exports = {
entry:"./src/index.js",
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'production',
devServer:{
hot:true,
inline:true
}
};
5.配置运行脚本package.json
在package.json文件中找到 "script"键,在里面追加编译脚本"server": "webpack-dev-server --mode production --inline --hot",如下
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"server": "webpack-dev-server --mode production --inline --hot"
},
6.运行npm run server
在localhost:8080可以看到如下。在index.js文件下修改对应的数据,保存,页面自动更新。
// 续更
babel从babel6升级到了babel7,webpack3也升级到了webpack4
还是按照之前的配置肯定就出错了。看一下最新的babel7的配置
这是项目结构
国际惯例先安装 webpack webpack-cli webpack-dev-server
npm install --save-dev webpack webpack-cli webpack-dev-server
再安装几个重要的loader:babel-loader style-loader css-loader less-loader
npm install --save-dev babel-loader style-loader css-loader less-loader
看看webpack官方文档对loader的定义:loader 用于对模块的源代码进行转换。loader 可以使你在 import
或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import
CSS文件!
所以loader的作用就是在我们加载文件时,可以使用对应的loader“翻译”源代码,翻译成浏览器可以理解的代码
babel-loader用于处理js文件
style-loader用于处理
css-loader用于处理css文件
less-loader用于处理less文件
接下来就是babel7的变化了。之前babel6是核心模块时babel-core,es6编译模块是babel-preset-es2015.
但是到了babel7这里全都变啦!!! babel-core变为 @babel/core,babel-preset-es2015升级为套餐系列 @babel/preset-env
所以 安装 @babel/core @babel/preset-env
最后package.json如下
{
"name": "es-webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"server": "webpack-dev-server --mode production --inline --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-transform-runtime": "^7.2.0",
"@babel/preset-env": "^7.3.1",
"babel-loader": "^8.0.5",
"clean-webpack-plugin": "^1.0.1",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"less-loader": "^4.1.0",
"path": "^0.12.7",
"raw-loader": "^1.0.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"@babel/polyfill": "^7.2.5",
"es2015": "0.0.0",
"less": "^3.9.0"
}
}
webpack.config.js 如下
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack') //访问内置的插件
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
mode: 'production',
entry: './src/app.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true,
inline:true
},
module: {
rules: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.less$/,
loaders: ["style-loader", "css-loader", "less-loader"],
include: path.resolve(__dirname, 'src/css')
},
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
},
{
test: /\.(htm|html)$/,
use: 'raw-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
}),
new CleanWebpackPlugin(['dist']),
new webpack.HotModuleReplacementPlugin()
],
optimization: {
minimize: true
}
}
.babelrc
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage",
"modules": false
}]
],
"plugins": [
[
"@babel/plugin-transform-runtime", {
"corejs": false,
"helpers": false,
"regenerator": false,
"useESModules": false
}
]
],
"comments": false
}