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/