环境(node npm webpack)
npm install webpack -g (webpack 全局安装到了本地环境中)
npm install webpack --save-dev(安装到package.json)
如果你使用 webpack 4+ 版本,你还需要安装 CLI。
npm install webpack-cli --save-dev
1.创建项目文件,进入项目文件
2.运行 npm init 一路回车(项目文件下会生成一个package.json文件)
3.创建一个webpack.config.js (并配置文件)
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
};
4.命令运行 npx webpack --config webpack.config.js
向package.json script 添加 build :“webpack”
上述等同于 npm run build
5.安装 style-loader css-loader 预处理器 加载器 同时使用 安装
6.配置webpack.config.js
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
7."watch": "webpack --watch", webpack 观察者模式 其中一个文件被修改,代码将重新编译
8. webpack-dev-server 一个服务器插件 为你提供一个简单的Web服务器 启动一个web服务并实时更新修改 实时编译的文件都保存在了内存中
安装 npm install webpack-dev-server --save-dev
配置:
+ devServer: {
+ contentBase: './dist'
+ },
9.安装 express 和 webpack-dev-middleware
配置:PublicPath: '/' 解析文件输出路径
下一步就是设置我们自定义的 express 服务
10. 生产环境构建
11.cross-env 跨平台 设置和使用环境变量的脚本
cross-env NODE_ENV=production
12.
vue-loader 识别.vue文件
vue-template-compiler 必须单独按照 编译器版本必须与vue软件包同步