码迷,mamicode.com
首页 > Web开发 > 详细

webpack打包

时间:2018-03-03 15:24:12      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:entry   resolve   webp   load   ons   plugin   png   file   分享图片   

技术分享图片

首先npm install webpack-cli

技术分享图片
export const a = 1;
export const b = 2;
export const c = 3;
test.js
技术分享图片
import * as constants from ‘./test‘;
console.log(constants.a);
app.js
技术分享图片
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo</title>
    </head>
    <body>
        <script src="dist/bundle.js"></script>
    </dody>
</html>
index.html
技术分享图片
{
    "name":"Module",
    "version": "1.0.0",
    "dependencies": {
        
    },
    "devDependencies": {
        "babel":"^6.23.0",
        "babel-cli": "^6.24.1",
        "babel-core":"^6.24.1",
        "babel-loader": "^7.0.0",
        "babel-preset-es2015":"^6.24.1",
        "webpack":"^2.6.1"
    }
}
package.json
技术分享图片
var webpack = require("webpack");
var path = require("path");
module.exports = {
    entry:‘./app.js‘,
    output:{
        path:path.resolve(__dirname,‘dist‘),
        filename:‘bundle.js‘
    },
    module:{
        loaders:[
            {test:/\.js$/,loader:‘babel-loader‘}
        ]
    }
}
webpack.config.js
技术分享图片
{
    "presets":[
        "es2015"  
    ],
    "plugins":[]
}
.babelrc

然后npm install

最后webpack

webpack打包

标签:entry   resolve   webp   load   ons   plugin   png   file   分享图片   

原文地址:https://www.cnblogs.com/leon-y-liu/p/8496544.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!