webpack系列学习-初体验

前言：笔者把学习的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- raw.githubusercontent.com/nvm-sh/nvm/… | bash
通过wget安装：wget -qO- raw.githubusercontent.com/nvm-sh/nvm/… | 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/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 三连