1. cnpm init -y //生产package.json的文件

1-1 安装依赖

  1. cnpm i webpack webpack-cli -S

1-2 配置

  1. const webpack = require("webpack");
  2. const path = require("path");
  3. const config =  {
  4.     entry:path.resolve(__dirname,'src/main.js'),  //入口文件
  5.     output:{  //出口文件
  6.         path:path.resolve(__dirname,'dist'),
  7.         filename:'bundle.js'
  8.     },
  9.     mode:'development'  //模式
  10. }
  11. module.exports = config;
  1. //配置package.json文件
  2. {
  3.    "scripts": {
  4.       "private": true,//(删除main.js这一行)
  5.         "build": "webpack  --config webpack.config.js"
  6.       }
  7. }
  1. //运行
  2. npm run build

1-3 Loader

wepack自身只能处理js和json文件,加上loader后,能让wepack去处理非js(css)的文件。loader可以将所有类型的文件转换为webpack能够处理的有效模块。

  1. 项目加载css
  • Tips:loader是配置在module中的—可以处理非js文件
    1. //安装依赖
    2. cnpm i style-loader css-loader -S
    ```javascript const webpack = require(“webpack”); const path = require(“path”); const config = { entry:path.resolve(__dirname,’src/main.js’), //入口文件 output:{ //出口文件
    1.   path:path.resolve(__dirname,'dist'),
    2.   filename:'bundle.js'
    },
  • module:{
  • rules:[
  • {
  • test:/.css$/i,
  • use:[‘style-loader’,’css-loader’]
  • }
  • ]
  • }, mode:’development’ //模式 } module.exports = config;
    1. <a name="7W1KA"></a>
    2. ## 1-4 plugins 打包优化压缩
    3. ```javascript
    4. //安装依赖
    5. cnpm i html-webpack-plugin -S
    6. //会自动生成index.html文件
    ```javascript … +const HtmlWebpackPlugin = require(‘html-webpack-plugin’); const config = { ….
  • plugins:[
  • new HtmlWebpackPlugin({
  • title:”webpack-vue”
  • })
  • ], mode:’development’ //模式 } module.exports = config;
    1. ```javascript
    2. //安装依赖
    3. cnpm i clean-webpack-plugin -S
    4. //自动清除dist目录下不需要的文件
    ```javascript
  • const {CleanWebpackPlugin} = require(“clean-webpack-plugin”); const config = { … plugins:[
    1. ...
  • new CleanWebpackPlugin()
    ], mode:’development’ //模式 }
    1. <a name="JkQ9w"></a>
    2. # 2 配置webpack-server
    3. 目的：为了查看代码运行时的效果 <br />Tips:设置webpack.config.js之后，项目必须重新启动。
    4. ```javascript
    5. //安装依赖
    6. cnpm i webpack-dev-server -S
    1. const config ={
    2. ...
    3. devServer:{
    4.  contentBase:"./dist"
    5.          port:8000,
    6.          overlay:{
    7.          errors:true,//可以将错误显示在页面上
    8.          }
    9. }
    10. }
    1. //配置package.json
    2. "scripts": {
    3. ...
    4. "serve":"webpack serve --open"
    5. }
    1. //运行
    2. npm run serve

    2-1 source map

    实现错误追踪
    1. module.exports = {
    2. devtool: 'inline-source-map'
    3. }

    3 安装vue-loader

    1. cnpm i vue vue-loader vue-template-compiler -S
    1. const {VueLoaderPlugin} = require("vue-loader")
    2. module.exports = {
    3. module:{
    4. rules:[
    5.    ...
    6.    {
    7.        test:/\.vue$/,
    8.        loader:'vue-loader'
    9.    }
    10. ]  
    11. },
    12. plugins:[
    13.  new HtmlWebpackPlugin({
    14.    ...
    15.  + template:path.resolve(__dirname,"public/index.html");
    16. }),
    17.      + new VueLoaderPlugin()
    18. ]
    19. }
    1. //main.js
    2. import App from './App.vue';
    3. import Vue from 'vue';
    4. new Vue({
    5. render:h=>h(App)
    6. }).$mount("#app");

    4 配置图片

    1. module.exports = {
    2. module:{
    3.  rules:[
    4.      {
    5.               test:/\.(png|jpg|svg|gif|jpeg)$/i,
    6.      type:'asset/resource'
    7.      }
    8.  ]
    9. }
    10. }
    1. npm run build //用来将项目打包,打包之后的项目就可以上传服务器了
    2. npm run serve/yarn serve  //用来查看项目的运行效果