demo__webpack

webpack 中使用的包更新非常频繁，使用方式可能很快就会改变，解决方式

1. 看webapck文档 和 包的使用文档

2. 看包的源码

3. 其他。。。

环境

win10 + webstorm 2019.1.3 + node 12.x

node 安装

往上一堆资料可以参考（比较简单）

初始化项目配置

yarn init -y //使用默认数据初始化

文件结构

│  package.json
│  webpack.config.js
│  yarn.lock
│
├─dist //打包后自动出现
│      app.js
│
├─node_modules //安装包后自动出现
└─src
    └─js
            app.js
            common.js
            es6.js
            require.js

安装 webpack

yarn add -D webpack webpack-cli //开发依赖

源文件内容

app.js

import e from './es6';
const r = require('./require');
const c = require('./common');
console.log('es6-module: ', e);
console.log('require-js: ', r);
console.log('common-js: ', c);

common.js

module.exports = 'this is commonjs use method';

require.js

define(function () {
   return 'require-js is here';
});

es6.js

export default 'this is es6 file';

package.json 项目配置

{
  "name": "demo_sample_bundle",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack --mode=development",
    "build": "webpack --mode=production"
  },
  "devDependencies": {
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.3"
  }
}

webconfig.config.js //打包配置

const path = require('path');
module.exports = {
    entry: {
        app: "./src/js/app.js"
    },
    output: {
        filename: '[name].js',
        path: path.join(path.resolve(__dirname), 'dist')
    },
    // mode: 'production'
};

打包命令

npx webpack //使用打包配置

需要在项目设置script项才可以使用对应的命令
npm run dev //未压缩的代码（开发环境）
npm run build //压缩后的代码（生产环境）

...(还有一些不常用的打包命令)