ECMAScript 6.0, 是JaveScript的下一个版本标准, 2015.06发版。
js支持ES6
安装插件 babel-loader
执行命令
npm install --save-dev babel-loader @babel/core @babel/preset-env复制代码
修改webpack.config.js
webpack.config.js修改后的内容
const path = require('path');var htmlWebpackPlugin = require('html-webpack-plugin');const extractTextPlugin = require("extract-text-webpack-plugin");const extractCSS = new extractTextPlugin("css/[name]-[hash].css");module.exports = { mode: 'development', entry: './src/js/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name]-[hash].js' }, module: { rules: [ { test: /\.css$/, use: extractCSS.extract({ fallback: "style-loader", // 编译后用什么loader来提取css文件 use: [ { loader: 'css-loader' }, ] }) }, { test: /\.js$/, //添加正则，处理js文件 use: [ //把ES6语法转换为ES5 { loader: 'babel-loader', options: { "presets": ["@babel/preset-env"] } } ] } ] }, plugins: [ new htmlWebpackPlugin({ filename: 'index.html', template: './src/template/index.html', title: 'this is webpack title' }), extractCSS ]};复制代码 更多文档参考
修改src/js/app.js
app.js修改后内容
require('../css/style.css');function hello(str) { console.log(str);}hello('hello world!');{ let es6 = 'welcome es6'; console.log(es6);}复制代码 浏览器访问dist/index.html
css支持less
安装插件 less-loader
执行命令 npm install --save-dev less less-loader
添加src/css/style.less文件
*{ padding:0; margin:0;}body{ background-color: #f5f5f5;}#app{ width: 200px; height: 200px; div { width: 100px; height:100px; color:green; border:1px pink solid; }}复制代码 修改src/template/index.html
<%= htmlWebpackPlugin.options.title %> 复制代码less 解析
修改src/js/app.js
删除 style.css文件 引入style.less文件
require('../css/style.less');function hello(str) { console.log(str);}hello('hello world!');{ let es6 = 'welcome es6'; console.log(es6);}复制代码 修改webpack.config.js
const path = require('path');var htmlWebpackPlugin = require('html-webpack-plugin');const extractTextPlugin = require("extract-text-webpack-plugin");const extractCSS = new extractTextPlugin("css/[name]-[hash].css");module.exports = { mode: 'development', entry: './src/js/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name]-[hash].js' }, module: { rules: [ { test: /\.css$/, use: extractCSS.extract({ fallback: "style-loader", // 编译后用什么loader来提取css文件 use: [ { loader: 'css-loader' }, ] }) }, { test: /\.less$/, use: extractCSS.extract({ fallback: "style-loader", // 编译后用什么loader来提取css文件 use: [ { loader: 'css-loader' }, { loader: 'less-loader' } ] }) }, { test: /\.js$/, //添加正则，处理js文件 use: [ //把ES6语法转换为ES5 { loader: 'babel-loader', options: { "presets": ["@babel/preset-env"] } } ] } ] }, plugins: [ new htmlWebpackPlugin({ filename: 'index.html', template: './src/template/index.html', title: 'this is webpack title' }), extractCSS ]};复制代码 说明
{ test:/\.less$/, use: extractCSS.extract({ fallback: "style-loader", // 编译后用什么loader来提取css文件 use: [ {loader:'css-loader'}, {loader:'less-loader'} ] })},复制代码 loader是由下往上解析，先处理less-loader，然后再css-loader
更多文档
src目录结构
src├── css│ └── style.less├── images│ └── avatar.png├── js│ └── app.js└── template └── index.html复制代码
执行打包npm run webpack
浏览器访问dist/index.html
css浏览器兼容
css3 目前有些语法需要添加浏览器前缀。
修改src/css/style.less文件
*{ padding:0; margin:0;}body{ background-color: #f5f5f5;}#app{ width: 200px; height: 200px; div { width: 100px; height:100px; color:green; border:1px pink solid; transform: translate(100px,0); }}复制代码 安装插件 postcss-loader
执行命令
npm install --save-dev postcss-loader autoprefixer 复制代码
修改 webpack.config.js
const path = require('path');var htmlWebpackPlugin = require('html-webpack-plugin');const extractTextPlugin = require("extract-text-webpack-plugin");const extractCSS = new extractTextPlugin("css/[name]-[hash].css");module.exports = { mode: 'development', entry: './src/js/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name]-[hash].js' }, module: { rules: [ { test: /\.css$/, use: extractCSS.extract({ fallback: "style-loader", // 编译后用什么loader来提取css文件 use: [ { loader: 'css-loader' }, { //浏览器添加前缀 loader: 'postcss-loader', options: { ident: 'postcss', plugins: [ require('autoprefixer')({ broswers: ['last 5 versions'] }) ] } } ] }) }, { test: /\.less$/, use: extractCSS.extract({ fallback: "style-loader", // 编译后用什么loader来提取css文件 use: [ { loader: 'css-loader' }, { //浏览器添加前缀 loader: 'postcss-loader', options: { ident: 'postcss', plugins: [ require('autoprefixer')({ broswers: ['last 5 versions'] }) ] } }, { loader: 'less-loader' } ] }) }, { test: /\.js$/, //添加正则，处理js文件 use: [ //把ES6语法转换为ES5 { loader: 'babel-loader', options: { "presets": ["@babel/preset-env"] } } ] } ] }, plugins: [ new htmlWebpackPlugin({ filename: 'index.html', template: './src/template/index.html', title: 'this is webpack title' }), extractCSS ]};复制代码 说明：
1.less解析需要注意顺序。 第一步less-loader，第二步 postcss-loader，第三步css-loader
2.autoprefixer 是 postcss-loader的其中一个插件
更多文档
执行打包npm run webpack
浏览器访问dist/index.html
总结
ES6支持
npm install --save-dev babel-loader @babel/core @babel/preset-env复制代码
{ test:/\.js$/, //添加正则，处理js文件 use: [ //把ES6语法转换为ES5 {loader:'babel-loader',options:{ "presets": ["@babel/preset-env"]}} ]}复制代码 less支持
npm install --save-dev less less-loader复制代码
{ test:/\.less$/, use: extractCSS.extract({ fallback: "style-loader", // 编译后用什么loader来提取css文件 use: [ {loader:'css-loader'}, {loader:'less-loader'} ] })}复制代码 浏览器兼容
npm install --save-dev postcss-loader autoprefixer 复制代码
{ test: /\.less$/, use: extractCSS.extract({ fallback: "style-loader", // 编译后用什么loader来提取css文件 use: [ { loader: 'css-loader' }, { //浏览器添加前缀 loader: 'postcss-loader', options: { ident: 'postcss', plugins: [ require('autoprefixer')({ broswers: ['last 5 versions'] }) ] } }, { loader: 'less-loader' } ] })}复制代码 思考：如何打包图片呢
请看