2019-01-18

4.28 Webpack使用

根据学习资料的webpack的时候，运行webpack失败，发现资料是3.xx版本，现在是4.xx版本，4.xx版本引入了webpack-cli，建议安装前，安装好 node.js 并配置环境变量

安装

• 进入项目根目录全局安装 webpack 以及 webpack-cli npm i webpack webpack-cli -g

• 项目初始化 npm init -y

• 项目局部安装 webpack 和 cli npm i webpack webpack-cli -D

• 进行 webpack 的配置，如果不配置，则需要有默认的 ./src/index.js作为入口文件，在./dist/main.js输出

• mode 选项，product 生产模式 development 开发模式

• mode 可以不配置，而是去 package.json 中定义 --mode 标记，"script":{"dev": "webpack --mode development", "build": "webpack --mode production"}

• 可以使用npm run dev或者 npm run build 进行开发、生产模式的文件切换

<script>

// webpack 是基于Nodejs的因此，是可以使用的 Node的语法

const path = require('path');

module.exports = {

mode: 'development',

// 模式 product development，这里配置以后输出的就是开发模式的文件，终端就运行 webpack即可

entry: './src/main.js', // 要打包的文件

output: {

filename: 'bundle.js',  // 打包生成的文件名

path: path.join(__dirname, '/dist') // 这里要求的是绝对路径，文件路径

}

}

</script>

上面一个是用 webpack.config.js 中 mode 设置的 development,第二个则是使用的
npm run build 的打包效果

1547817858(1).jpg