webpack学习路线(一) 基础配置

为什么需要构建工具？

1. 转换ES6语法

2. 转换JSX

3. CSS前缀补全/预处理器

4. 压缩混淆

5. 图片压缩

为什么选用webpack？

	webpack	grunt	gulp
定义	Module bundler	Task runner	Task runner
语言	JavaScript	Node.js	Node.js
发布时间	2012.3	2012.6	2013.7
Github stars	40766	11796	29427
周下载量	3385392	478876	816228

社区生态丰富、配置灵活和插件化扩展、官方更新迭代速度快

 

初识Webpack

配置文件名称

       webpack默认配置文件:webpack.config.js

       可以通过 webpack --config指定配置文件

webpack配置组成

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

环境安装

安装Node.js和NPM

安装nvm（https://github.com/nvm-sh/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

安装Node.js和NPM

• nvm install 版本号
• 检查是否安装成功：node -v, npm -v

安装webpack和webpack-cli

• mkdir my-demo
• cd my-demo
• npm init -y
• npm i webpack webpack-cli -D