前言：笔者把学习的webpack知识从基础到原理写个系列，以便回顾。希望能帮助到更多正在学习webpack的小伙伴。

webpack:配置文件名称

• webpack默认配置文件：webpack.config.js
• 可以通过webpack --config 指定配置文件

webpack配置组成

module.exports = {
        entry: './src/index.js', // 打包的入口文件
        output: './dist/main.js', // 打包的输出
        mode: 'production', //环境
        module: {
            rules: [ // loader配置
                {
                    test: /\.txt$/,
                    use: 'raw-loader'
                }
            ]
        },
        plugins: [  // 插件配置
            new HtmlwebpackPlugin({
                template: './src/index.html'
            })
        ]
    }

环境搭建：安装nodejs 和npm

安装nvm

• 通过curl安装：curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
• 通过wget安装：wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

安装nodejs和npm

• nvm install v10.15.3
• 检查是否安装成功：node -v, npm -v

安装webpack 和 webpack-cli

mkdir project

cd project

npm init -y

npm install webpack webpack-cli --save-dev

检查是否安装成功 : ./node_modules/.bin/webpack -v

webpack小demo

在根目录创建webpack.config.js

• 第一步：指定输入文件，输出文件，开发环境

  const path = require('path')
    module.exports = {
        entry:'./src/index.js',
        output:{
            path: path.join(__dirname,'dist'),
            filename: 'bundle.js'
        },
        mode:'production'
    }

• 第二步：在根目录创建src文件夹

  // src/hello.js
  export function hello(){
      return 'hello'
  }

  // src/index.js
  import { hello } from './helloworld';
  document.write(hello())

• 第三步：执行webpack打包

  ./node_module/.bin/webpack

• 第四步：打包后就能看到dist/bundle.js了。

通过npm scripts 运行webpack

在package.json中增加

"script":{
    "build":"webpack"
}

通过npm run build 就可以运行webpack了

原理：模块局部安装会在node_module/.bin目录创建软连接

下篇文章：介绍下webpack基本用法。

以上代码放到了github

感谢star 三连