主要设置
创建项目
新建一个项目文件夹
npm init -y 初始化package.json
安装webpack依赖包
npm install –save-dev webpack webpack-cli webpack-dev-server
1 | devServer: { |
安装vue
npm install vue
1 | npm install -D vue-loader vue-template-compiler |
vue-loader webpack配置 参考官方文档-手动设置
1 | // webpack.base.config.js |
1 | module.exports = { |
config详细配置
新建一个src文件夹,并在src文件下新建index.js,在根目录下新建webpack.config.js
webpack.config.js的配置
- webpack.config.js 配置,webpack-dev-server工具的使用。
html-webpack-plugin 可以指定template模板文件,将会在output目录下,生成html文件,并引入打包后的js.
安装依赖:
1 | npm install --save-dev html-webpack-plugin |
配置webpack.config.js module中的rules
1 | const HtmlWebpackPlugin = require('html-webpack-plugin'); |
1 | const path = require('path') |
创建项目目录文件
在根目录下创建一个index.html文件作为启动页面,一个webpack.config.js作为webpack配置文件(实际项目中这里会有webpack配置文件,分别用于开发环境和生产环境,这里简便起见就用一个配置文件) ,再创建一个App.vue文件。
1 | cet-query |
index.html
1 | <!DOCTYPE html> |
index.js
1 | import Vue from 'vue' |
App.vue
1 | <template> |
添加启动脚本
在package.json添加启动脚本命令
1 | "scripts": { |
这样执行npm run dev就能启动成功了, npm run build也能打包生成dist文件
其它扩展处理
引入babel-loader兼容代码
babel-preset-env 帮助我们配置 babel。我们只需要告诉它我们要兼容的情况(目标运行环境),它就会自动把代码转换为兼容对应环境的代码。ES6/ES7/JSX 转义需要 Babel 的依赖,支持装饰器。
1 | npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread |
更改webpack.config.js文件
1 | { |
配置css
输入命令下载style-loader css-loader
1 | npm i style-loader css-loader -D |
配置webpack.config.js module中的rules
1 | { |
如果要打包scss或者其它,再安装对应的loader。
支持sass
输入命令下载sass-loader node-sass
1 | npm i sass-loader node-sass -D |
修改webpack.config.js的css
1 | { |
支持图片
输入命令下载file-loader url-loader
1 | npm i file-loader url-loader -D |
配置webpack.config.js module中的rules
1 | { |
完整的文件参考
webpack.config.js文件
1 | const path = require('path') //path是Nodejs中的基本包,用来处理路径 |
package.json文件
1 | { |