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 图片路径不对问题