webpack入门

一. 建一个文件夹webpack_test

二. 在webpack_test内建2个文件，webpack.config.js，package.json

1.通过配置文件来使用webpack

在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，我们在其中写入如下所示的简单配置代码，目前的配置主要涉及到的内容是：

入口文件路径和打包后文件的存放路径。

//webpack.config.js

var webpack = require("webpack");
module.exports ={
    entry:_dirname + "/src/main.js", //唯一的入口文件
    output：{
        path:_dirname + "/js", //打包后的文件存放的地方
        filename:"main.js"  //打包后输入文件夹的文件名
    },
        module: {
            loaders: [{
                test: /.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015'],
                    // presets: ['env'],
                    plugins: ['transform-runtime']
                }
            }, {
                test: /.less$/,
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'less-loader'
                    ]
                }]
            }
        }
}

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录

有了这个配置之后，再打包文件，只需在终端里运行webpack命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项

2..在package.json中对scripts对象进行修改设置

 //package.json
{
    "name": "webpack-test",  //项目名称
    "version": "1.0.0",  //项目版本
     "description": "Sample webpack test",   //项目描述
    "scripts": {
        "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
     },
     "author": "zhongsuishan",  //作者
    "license": "ISC",   //
    "devDependencies": {
        //一些
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-preset-env": "^1.6.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "extract-text-webpack-plugin": "^3.0.0",
        "json-loader": "^0.5.7",
        "webpack": "^3.3.0"
     }
 }

3.打开终端输入命令cnpm(npm) install，安装node_modules(依赖模块)

4.在根目录建src文件夹（对应webpack.config.js中配置的 entry:_dirname + "/src/main.js", //唯一的入口文件）

在src里新建文件，main.js，a.js

main.js是唯一的入口文件，a.js是其他逻辑文件

//main.js
let a = require('./a');

let {
    val,
    outdata
} = a;

console.log(outdata());
console.log(val);

//a.js
exports.val = "I am a.js";

exports.outdata = ()=>{
    // this
    return "aaaaaaaa";
}

5.在根目录下建test.html,引入main.js

6.在终端输入命令webpack，打包

每次改动项目代码，需要打包，在终端输入webpack命令进行打包

7.打包好的项目目录

我们在test.html，里面<script src="js/main.js"></script>是打包后的main.js，并不是src里面的main.js

我们在开发的时候，是在src里面去新建js文件和开发js，引用的时候是，引入打包好的js文件夹里面的main.js

8.在浏览器中打开test.html,调试模式下

可以看webpack中文网了解更多：https://doc.webpack-china.org/concepts/

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/xiaozhen0610/article/details/108244128
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-30 12:14:29
阅读 ( 1041 )
分类：

webpack入门

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看