想基于ES6的模块化做一些开发,无奈浏览器目前都不支持ES6的模块化,需要转换成ES5才能在浏览器运行。于是需要基于WebPack搭建一个ES6转ES5的环境,最好是可以实时自动编译,还可以在浏览器看出变化。网上这方便的资料很多,不过也都挺简略的,这里就记录一下我的搭建过程。
时间2018年9月20日——增加支持ES7
node.js安装
很简单就不说了,去官网下载一个exe,傻瓜式安装就可以了
cnpm安装
虽然npm也可以进行安装,但会报错,而且有一个node-sass模块没法安装十分麻烦。在node.js的窗口里执行下面代码,进行安装cnpm(淘宝镜像):
npm install -g cnpm --registry=https://registry.npm.taobao.org
在自己的项目根据下,进行下面的文件配置:
{
"presets": [
[
"env",
{
"targets": {
"browsers": [
"last 2 versions",
"not ie <= 8"
]
}
}
]
],
"plugins": [
[
"transform-runtime",
{
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}
]
]
}
{
"name": "hmap",
"version": "1.0.0",
"description": "test",
"scripts": {
"dev": "webpack-dev-server --mode development",
"start": "npm run dev",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"clean-webpack-plugin": "^0.1.17",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.8",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.0.6",
"node-sass": "^4.9.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {}
}
const path =require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin('css/[name]-css.css');
const extractSASS = new ExtractTextPlugin('css/[name]-sass.css');
//构建前删除dist目录
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports={
entry:'./src/js/index.js',//入口JS
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'./dist')
},
module:{
rules:[
{
test:/\.css$/,
use: extractCSS.extract({
use: "css-loader",
fallback: "style-loader"
})
},
{
test:/\.scss$/,
use: extractSASS.extract({
use: [
{loader: "css-loader"},
{loader: "sass-loader"}
],
fallback: "style-loader"
})
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options:{
cacheDirectory:true//缓存
}
}
},
{ //打包css里的图片
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, //小于8KB,就base64编码
name:'img/[name].[ext]', //在哪里生成
publicPath:'../' //在生成的文件引用,前面加
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin(
{
template: './src/index.html',// 模板文件
filename: 'index.html'
}
),
new CopyWebpackPlugin([
{from:'./src/img',to:'./img'}
]),
extractCSS,
extractSASS,
new CleanWebpackPlugin(['dist','build'],{
verbose:false,
exclude:['img']//不删除img静态资源
})
]
}
在项目根目录下执行下面命令,安装依赖的模块,自动安装,会在项目内生成node_modules文件夹,其中全是依赖的模块,等待安装完成
cnpm install
执行npm start命令,项目会进入开发模式,自动编译,随着你index.js内容的变更,自动生成,编译完成访问http://localhost:8080/,就可以看到运行的结果了。
执行npm run build 命令,就会进入生成模式,将你src下的资源进行编译,在项目根目录生成dist文件夹,编译后的文件全在dist文件夹内
本博文的撰写,在很大程度参考了https://blog.csdn.net/cvchihzhza/article/details/79028082的博文