笔记：webpack

webpack

需要先在全局安装webpack模块，才能在本地使用 webpack 命令

// 全局安装
npm install webpack -g

// 本地安装 [安装到开发环境]
npm install webpack [--save-dev]

// 将 hello.js 打包成 hello.bundle.js
webpack hello.js hello.bundle.js
(Asset: 打包生成的文件；size：大小；chunks：打包的分块；chunks name：块名称)

// hello.js
require(./world.js);

// 引入css文件,不报错
requrie(css-loader!./style.css); 
// 引入css文件，在html中引入hello.js 使css生效
requrie(style-loader!css-loader!./style.css);
// 使用命令行
webpack hello.js hello.bundle.js --moudle-bind 'css=style-loader!css-loader'

function test(a){alert(a)};
test('hahaha!!!');

// 处理css文件的模块
npm install css-loader style-loader --save-dev
// webpack 其他的一些参数 空格分割
--progress：显示百分比进程
--display-modules：
--display-reasons：为什么打包某个模块的原因

基本配置

webpack.config.js

module.exports = {
	// 入口文件
    entry: './src/script/main.js',
    output: {
	    // 输出路径
        path: './dist/js',
        // 输出文件名
        filename: 'bundle.js'
    }
}

// 默认文件名为 webpack.config.js; 改名后运行以下命令
webpack [--config webpack.dev.config.js]

// 配合npm的一些脚本（package.json）运行
scripts: {
	    "webpack": "webpack --config webpack.config.js --progress --display-moudles --colors --display-reason"
}
npm run webpack