版权声明： https://blog.csdn.net/GISuuser/article/details/81981075
初衷
想基于ES6的模块化做一些开发，无奈浏览器目前都不支持ES6的模块化，需要转换成ES5才能在浏览器运行。于是需要基于WebPack搭建一个ES6转ES5的环境，最好是可以实时自动编译，还可以在浏览器看出变化。网上这方便的资料很多，不过也都挺简略的，这里就记录一下我的搭建过程。
基础环境
node.js安装
很简单就不说了，去官网下载一个exe，傻瓜式安装就可以了
cnpm安装
虽然npm也可以进行安装，但会报错，而且有一个node-sass模块没法安装十分麻烦。在node.js的窗口里执行下面代码，进行安装cnpm（淘宝镜像）：
npm install -g cnpm --registry=https://registry.npm.taobao.org文件配置
在自己的项目根据下，进行下面的文件配置：
- 新建.babelrc文件，内容为
{ "presets": [ ["env", { "targets": { "browsers": ["last 2 versions", "not ie <= 8"] } }] ] } - 新建package.json文件 ，里面的一些配置细节，可以根据自己的需求改，下面的依赖就不要动了
{
"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-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": {}
}
- 新建webpack.config.js文件，配置webpack，内容为
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静态资源
})
]
}
- 在根目录下新建src文件夹，在src内新建img、css、js文件夹，新建index.html文件，在js内新建index.js。后期开发的时候，不要在index.html中引用css或js文件，开发环境会自动将编译好的index.js文件插入到index.html中。如果要引用css或js文件，在index.js中，使用ES6的import。结果如下图：
安装依赖模块
在项目根目录下执行下面命令，安装依赖的模块，自动安装，会在项目内生成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的博文