webpack设计思想：不区分.png .css .js 等文件，都视为一个模块。通过require导入，loader加载器编译之后打包在一个主js文件里。
优势：减少http请求。
1. webpack的初级配置
新建项目：F:/wepback
全局node安装webpack ：cnpm install webpack -g
项目node安装webpack : f: ==>cd webpack ==> cnpm install webpack --save-dev
新建webpack.config.js文件
项目结构：
//main.js let one = 'Hello Word!'; document.write(`<h1>${one}</h1>`); //firth.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="bundle.js" type="text/javascript" charset="utf-8"></script> </head> <body> </body> </html> //webpack.config.js module.exports ={ entry:'./main.js', output:{ filename:'./bundle.js' // bundle.js打包后的文件名，默认为同级目录下。 } }
node命令行： webpack
2.配置基本配置：
在需要打包的主文件里，即entry的入口文件内可以通过require导入各种模块，包括css文件等。
初始化package.json 文件 ： cnpm init
安装babel：用到es6才安装 cnpm install --save-dev babel-loader babel-core cnpm install --save-dev babel-preset-latest cnpm install --save-dev babel-polyfill
var webpack = require("webpack"); var path = require("path"); module.exports ={ entry:{ admin:'./admin/index.js', //入口文件最开始地方添加：require("babel-polyfill"); 用到es6才需要添加 consumer:'./consumer/index.js' }, plugins:[ new webpack.optimize.UglifyJsPlugin() //打包插件，此插件为压缩代码 ], output:{ path:path.join(__dirname,'dist'), //path ：__dirname为文件名，在dist文件下生成。 filename:'[name].bundle.js' //[name]取得是entry的key值。即在dist下生成了admin.bundle.js文件和consumer.bundle.js文件。 }, module:{ loaders:[ {test:/\.js$/,loader:'babel-loader',query:{presets:['es2015']}} //es6编译成es5 ] } }3.热替换和自动更新。
cnpm install webpack webpack-dev-server -g
cnpm install webpack webpack-dev-server --save-dev
修改package.json 文件：
修改webpack.config.js文件 ： 只需加 publicPath:'/dist/' 这一步
node命令行：webpack
node命令行：webpack-dev-server
网页打开：http://localhost:8080/
修改文件后，浏览器会自动更新。
4.es6项目
index.js文件：
require("babel-polyfill"); require('./es6/import.js'); import {Fun} from "./es6/export"; let fun = new Fun(); fun.getName ='WANG'; let yie = fun.getName(); console.log(yie.next()); console.log(yie.next());export.js:
class Fun { constructor(){ this.name = []; }; get getName(){ if(this.name.length == 0){ return '未添加姓名'; }else{ return function* (){ for(var value of this.name){ yield value; } return '遍历完成1'; } } }; set getName(name){ this.name.push(name); }; } export {Fun};import.js:
import {Fun} from "./export"; class Name extends Fun{ isSuccess(){ alert('yes 继承成功1'); } } var name =new Name(); name.isSuccess();webpack.config.js:
var path = require('path'); module.exports = { entry:"./index.js", output:{ path:path.join(__dirname,'dist'), publicPath:'/dist/', filename:'index.js' }, module:{ loaders:[ { test:/\.js$/, loader:'babel-loader', query:{ presets:['es2015'] } } ] } }index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="dist/index.js" type="text/javascript" charset="utf-8"></script> </body> </html>
转载于:https://www.cnblogs.com/changyaoself/p/7992013.html
