webpack打包流程

0.全局安裝webpack

npm install -g webpack複製代碼

1.新建文件夾，生成package.json

npm init 複製代碼

生成package.json

2.局部安裝webpack

npm install --save-dev webpack複製代碼

 局部安裝webpack保存在開發環境之中

3.安裝css 

npm安裝處理插件
npm install css-loader style-loader
配置：
 module:{
    	rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
          ]
    }
複製代碼

4.配置webpack.config.js

const path = require('path');
module.exports={
    //入口文件的配置項
    entry:{
        entry:'./src/entry.js'
    },
    //出口文件的配置項
    output:{
        //輸出的路徑，用了Node語法
        path:path.resolve(__dirname,'dist'),
        //輸出的文件名稱
        filename:'bundle.js'
    },
    //模塊：例如解讀CSS,圖片如何轉換，壓縮
    module:{},
    //插件，用於生產模版和各項功能
    plugins:[],
    //配置webpack開發服務功能
    devServer:{}
}複製代碼

5.引入jquery外部框架

npm install --save-dev jquery
var $=require('jquery');複製代碼

6.圖片地址處理

安裝

npm install --save-dev file-loader複製代碼

處理圖片地址：

module:{
    	rules: [
           {
              test: /\.(png|jpg|jpeg|gif)$/,
              use: ['file-loader']
            }
          ]
    }複製代碼

解決vue-cli 打包css 圖片路徑不對問題