webpack打包

Posted 2020-10-26 leon-y-liu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack打包相关的知识，希望对你有一定的参考价值。

技术分享图片

首先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打包的主要内容，如果未能解决你的问题，请参考以下文章

webpack打包原理

手把手教你打包代码----webpack

webpack: 简单分析 webpack 打包后的代码

webpack 如何配置 CSS抽取和打包压缩

webpack中实时打包

实现webpack的实时打包构建