webpack 初体会

146 阅读1分钟
环境(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软件包同步