webpack4+ 学习1

基本概念

webpack提供mode选项，配置webpack相应模式的内置优化

//webpack.production.config.js
module.exports = {
   mode: "production",
}

入口文件（entry）

入口文件，即起始文件

入口起点（entry point）指示webpack应该使用那个模块，来作为构建其内部依赖图的开始，进入入口起点后，webpack

会找出那些模块和库是入口起点依赖的

可以在webpack的配置文件中配置入口，配置节点为：entry, 当然可以配置一个入口，也可以配置多个。

输出（output）

output属性告诉webpack在哪里输出它所创建的bundles, 以及如何命名这些文件

 

const path = require('path');
module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist/static/js') 
    }
}

 

loader

loader让webpack能够去处理那些非javascript文件（webpack自身理解为javascript）。loader可以将所有类型的文件

转换为webpack能够处理的有效模块，然后你就可以利用webpack的打包能力，对他们进行处理里。

插件（plugins）

loader被用于转换某些类型模块。而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩

一直到重新定义环境中的变量。插件接口功能及其强大，可以用来处理各种各样的任务

webpack安装

 

请确保安装了node.js的最新版本。而自己已经在你的项目下已经初始化好了最基本的package.json文件

初始化命令：

 

npm init -y

 

本地安装webpack

 

npm install --save-dev webpack
# 如果你使用webpack 4+ 版本，你需要安装cli
npm install --save-dev webpack-cli

 

安装完成后，可以添加npm的script脚本

//package.json
"scripts": {
   "start": 'webpack --config webpack.config.js'
}

全局安装webpack不推荐,会影响其他旧的项目