webpack + babel

it2022-05-06  0

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


最新回复(0)