Webpack 基础了解

版本：4.0

配置文件：webpack.config.js

4.0 可以不用配置webpack.config.js

---

#### 入口entry 可以配置一个或多个入口起点 ``` module.exports = { entry: './path/to/my/entry/file.js' }; ``` #### 出口output 配置输出的地址，bundles ``` const path = require('path');

module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};

#### loader
处理js不能处理的，然后转化成依赖图

const path = require('path');
const config = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /.txt$/, use: 'raw-loader' }
]
}
};

module.exports = config;

#### pluginns 插件

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
module: {
rules: [
{ test: /.txt$/, use: 'raw-loader' }
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};

module.exports = config;

#### 模式

module.exports = {
mode: 'production' //production 或者 development
};

## 命令行
npm init : 初始化项目
npm i -g webpack --save-dev  : 全局安装
npm i -D webpack： 在开发环境中安装

基本项目构建三个文件
> app.js--webpack运行的入口程序
index.html--本示例中的网页文件
module.js--一个js模组