webpack直接打包

• 1.裝生產環境
• 2.打包 webpack 入口文件路徑 出口文件路徑

webpack.config.js配置

• 1.出入口配置
  • 1-1.直接控制臺輸入webpack就可以打包了
  • 1-2.多入口文件配置
  • 1-3.熱更新安裝
  • 1-4.css-loader style-loader配置 三種寫法
  • 1-5.代碼壓縮插件 uglifyjs-webpack-plugin 次插件webpack內部集成 不需要安裝 註意：此處不可以用dev啟動，原始webpack壓縮就可以了
  • 1-6.此刻以生產環境啟動服務器 分離的文件路徑就ok了 對於website路徑前綴可以更改

  • const path=require(‘path‘);
    module.exports={
        entry:‘./src/index.js‘, //入口配置
        output:{
            path:path.resolve(__dirname,‘dist‘),//出口路徑
            filename:‘index.js‘//出口文件名
        },//出口配置
        // module:{},//圖片字體視頻等配置
        // plugins:{},//插件
        // devServer:{}//服務
     
    
    }

    const path=require(‘path‘);
    module.exports={
        entry:{
            entry1:‘./src/index1.js‘,
            entry2:‘./src/index2.js‘
        }, //多入口配置
        output:{
            path:path.resolve(__dirname,‘dist‘),//出口路徑
            filename:‘[name].js‘//多出口 name表示和對應的入口文件入口屬性名一樣
        }
    }

html文件放入src的騷操作,html打包

• 1.安裝並引入html-webpack-plugin
• 2.直接在終端運行webpack,html文件被打包到dist文件夾中

css引入圖片打包 直接打包成js一部分

• 1.安裝file-loader url-loader
• 2.配置

css分離

• 1.將打包好到js文件的css分離
• 2.下載包並引入 extract-text-webpack-plugin
• 3.修改css配置 但是這樣分離的css路徑是有問題的
• 4.設置出口文件的公共路徑 http://localhost:8080
• 5.如果本地引用 設置公共路徑為 path.resolve(‘dist‘)

img引入的圖片打包

• 1.安裝html-withimg-loader
• 2.配置

對於動畫樣式如何自動添加內核前綴

• 1.安裝postcss-loader 和autoprefixer
• 2.新建文件postcss.config.js
• 3.配置

去除多余的css樣式

• 1.安裝purifycss-webpack purify-css
• 2.全局引入
• 3.配置plgins

es5轉換為6的最新包

• 1.下載安裝babel-preset-env
• 2.添加.babelrc配置

目錄結構

webpack.config.js配置

const path=require(‘path‘);
const uglify=require(‘uglifyjs-webpack-plugin‘);
const htmlPlugin=require(‘html-webpack-plugin‘);
const extractTextPlugin = require("extract-text-webpack-plugin");
const glob = require(‘glob‘);//同步檢查html
const PurifyCSSPlugin = require("purifycss-webpack");//去除多余的css樣式的插件
var website ={
    publicPath:path.resolve(‘dist‘)
}
module.exports={
    entry:{
        entry1:‘./src/index1.js‘,
        entry2:‘./src/index2.js‘
    }, //多入口配置
    output:{
        path:path.resolve(__dirname,‘dist‘),//出口路徑
        filename:‘[name].js‘,//多出口 name表示和對應的入口文件入口屬性名一樣
        publicPath:website.publicPath//公共路徑
    },
    devServer:{
        //設置基本目錄結構
        contentBase:path.resolve(__dirname,‘dist‘),
        //服務器的IP地址，可以使用IP也可以使用localhost
        host:‘localhost‘,
        //服務端壓縮是否開啟
        compress:true,
        //配置服務端口號
        port:8080
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                //用於匹配處理文件的擴展名的表達式，這個選項是必須進行配置的；
                use: extractTextPlugin.extract({
                    fallback: "style-loader",
                    use:[ { loader: ‘css-loader‘, options: { importLoaders: 1 } },
                    ‘postcss-loader‘]
                  })//分離css文件配置
                // use:[‘style-loader‘,‘css-loader‘,‘postcss-loader‘],
                //loader名稱，就是你要使用模塊的名稱，這個選項也必須進行配置，否則報錯；
                //include/exclude:‘‘手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）；
                //query:‘‘ 為loaders提供額外的設置選項（可選）。
            }
            /**
             * rules:[{
             * test:/\.css$/,
             * loader:[‘style-loader‘,‘css-loader‘]
             * 或者 use[{loader:"style-loader"},{loader:‘css-loader‘}]
             * }]
             * 
             * 
             */,
             {
                test: /\.js$/,//js5轉6
                use: [{
                  loader: ‘babel-loader‘,
                  options: {
                     presets: [‘es2015‘]
                  }
                }],
                exclude: /node_modules/
              },{
                  test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
                  use:[{
                      loader:‘url-loader‘,//小於500000b的url-loader轉換，大於的交給file-loader 
                      options:{//url內置了file 只需要引url-loader 大於的會自動交給file處理
                          limit:500000, //將小於500000b的文件打成base64的格式寫入js
                      }
                  }]
              },
              {
                test: /\.(htm|html)$/i,//img圖片正確路徑配置
                use:[ ‘html-withimg-loader‘] 
              }
        
        ]
    },
    plugins:[
        new uglify(),
        new extractTextPlugin("/css/index.css"),//css樣式分離後的路徑
        new htmlPlugin({
            minify:{
                removeAttributeQuotes:true//是對html文件進行壓縮，removeAttrubuteQuotes是卻掉屬性的雙引號。
            },
            hash:true,//為了開發中js有緩存效果，所以加入hash，這樣可以有效避免緩存JS。
            template:‘./src/index.html‘//是要打包的html模版路徑和文件名稱。
           
        }),
        new PurifyCSSPlugin({
            // Give paths to parse for rules. These should be absolute!
            paths: glob.sync(path.join(__dirname, ‘src/*.html‘)),
            })//用於刪減多余的css樣式
    ]
}

常用的包

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-cli": "^6.26.0"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.6",//css添加內核前綴
    "babel-core": "^6.26.0",//es5轉換es6 方法1 
    "babel-loader": "^7.1.2",//es5轉es6  方法1
    "babel-preset-es2015": "^6.24.1",//es5轉es6  方法1
    "css-loader": "^0.28.7",//css樣式解析
    "extract-text-webpack-plugin": "^3.0.2",//css文件分離
    "file-loader": "^1.1.5",//圖片等文件解析
    "html-webpack-plugin": "^2.30.1",//html自動被加載js 也就是html打包
    "html-withimg-loader": "^0.1.16",//img圖片路徑打包
    "postcss-loader": "^2.0.9",//為css添加內核前綴
    "style-loader": "^0.19.0",//css樣式解析
    "url-loader": "^0.6.2",//圖片等文件解析
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.5"//熱更新模塊
  }
}

postcss.config.js

module.exports = {
    plugins: [
        require(‘autoprefixer‘)
    ]
}

.babelrc.js

{
    "presets": ["es2015"]
  }
//   {
//     "presets":["react","env"]
// }//通過轉換為env將es5轉換為es6

webpack3.0+總結