純webpack打包項目

上星期寫了篇vue-cli下生成的webpack簡單項目，關(guān)于模塊和組件的代碼分割式的項目開發(fā)，今天就總結(jié)下慕課網(wǎng)推出的純webpack打包的一些細節(jié)，包括webpack1和2的一些不同和webpack配置文件的手動編寫以及所有打包的東西如何濃縮成一個js文件

項目文件夾：

根目錄：


1.png

src下的目錄：


2.png

3.png

4.png

dist下打包后生成的目錄：


5.png
下面是詳細的流程步驟：

1、建立項目名

mkdir 項目名

2、定位項目名里面

cd 項目名

3、生成package.json文件

npm init --yes

4、安裝webpack( 不加版本號默認為2.0以上 )

cnpm install webpack --save-dev

5、生成依賴包，即node_modules目錄 ( 生成一小部分，后面需安裝各種包，不像vue-cli本身就集成很多 )

cnpm install

6、建立src和dist文件夾，src目錄下建styles和scripts( 可省略此步，手動新建 )

mkdir src mkdir dist ……

7、根目錄下建立index.html，并暫時引入出口文件bundle.js( 前期預覽效果，后面會自動引入 )

8、根目錄建立webpack.config.js，先定義進出口文件對應的目錄及隨便寫entry文件的內(nèi)容

module.exports = {
    entry: {
       main: './src/scripts/main.js',   
       aaa: './src/scripts/aaa.js',
       bbb: './src/scripts/bbb.js',
       ccc: './src/scripts/ccc.js'
    },
    output: {
       path: path.resolve(__dirname,'./dist'),
       filename: 'js/[name]-bundle.js'
    }

9、初次執(zhí)行打包命令，可看到dist下生成打包后的js文件

直接在命令行輸入 'webpack'   ( 后面每一步操作都要webpack一下才可看到效果 )
'webpack --display-error-details' ： 出錯時錯誤的詳情
'webpack -w' ： 提供watch方法，實時進行打包更新( 推薦加上-w )
'webpack -p' ： 對打包后的文件進行壓縮
'webpack -d' ： 提供SourceMaps，方便調(diào)試

10、生成頁面中的html，安裝html-webpack-plugin插件并配置好

cnpm install html-webpack-plugin --save-dev

module.exports = {
   plugins: [ 
      //根目錄的index.html生成dist下的html，多new幾個就可多個頁面生成
       new htmlWebpackPlugin({       
          filename: 'index.html',
          template: 'index.html',   
          inject: 'body',           //script標簽的放置
          title: 'index title test',
          minify: {                    //html壓縮
            removeComments: true,     //移除注釋
            collapseWhitespace: true //移除空格
          }
          //chunks: ['main','aaa'],      //生成html頁面后的script文件的引入
          //排除沒有用到的script文件，其他的都引進來，比chunks更好匹配
          excludeChunks: ['bbb','ccc']    //引入了main.js和aaa.js
       })
}

11、接下來安裝各種loader及配置：

js的loader安裝：

cnpm install babel-preset-latest  --save-dev
cnpm install babel loader babel-core babel-plugin-transform-runtime babel-preset-es2015  babel-runtime --save-dev

css的loader安裝：

cnpm install style-loader css-loader --save-dev
//css3前綴補全:
cnpm install postcss-loader --save-dev  
cnpm install autoprefixer --save-dev

sass的loader安裝：

cnpm install sass-loader node-sass webpack --save-dev

模板中的loader安裝:

cnpm install html-loader --save-dev  ( html )
cnpm install ejs-loader --save-dev   ( ejs )

圖片:

cnpm install file-loader --save-dev

url：

cnpm install url-loader --save-dev

圖片壓縮：

cnpm install image-webpack-loader --save-dev

大體配置格式：

module.exports = {
   module: {
      rules: [
         //處理js中的loader
          {
            test: /\.js$/,
            loader: 'babel-loader',
            include: path.resolve(__dirname,'/src'),               
            exclude: path.resolve(__dirname,'/node_modules')      
          },
          //處理css中的loader
          {
            test: /\.css$/,
            loader: 'style-loader!css-loader?importLoaders=1!postcss-loader'  
          },
          //處理sass中的loader
          {
            test: /\.scss$/,
            loader: 'style-loader!css-loader!postcss-loader!sass-loader' 
          },
          //處理html模板中的loader
          {
            test: /\.html$/,
            loader: 'html-loader'
          },
           //處理ejs模板中的loader,以.tpl后綴結(jié)尾的
           {
             test: /\.tpl$/,
              loader: 'ejs-loader'
           },
           //處理圖片中的loader( 通常url/file/image-webpack等loader配合 )
           {
             test: /\.(png|jpg|gif|svg)$/i,  
             loader: 'file-loader'
           }
      ]
   }
}
css3前綴要放在插件里，與webpack1的用法不同
module.exports = {
   plugins: [ 
      new webpack.LoaderOptionsPlugin({
          options: {
             postcss: [
                require("autoprefixer")({
                     browsers: ["last 5 versions"]
                  })  
                 ]     
             }   
       })
   ]
}
最終的webpack.config.js配置如下：
var webpack = require("webpack");
var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: './src/app.js', /*{
       main: './src/scripts/main.js',   
       aaa: './src/scripts/aaa.js',
       bbb: './src/scripts/bbb.js',
       ccc: './src/scripts/ccc.js'
    }*/
    output: {
       path: path.resolve(__dirname,'./dist'),
       filename: 'js/[name]-bundle.js',
       publicPath: 'http://cdn.com/'   //上線的絕對路徑
    }, 
    //插件
    plugins: [ 
       new htmlWebpackPlugin({       //根目錄的index.html生成dist下的html，可以多個生成
          filename: 'index.html',
          template: 'index.html',   
          inject: 'body',           //script標簽的放置
          //title: 'index title test',
          minify: {                    //html壓縮
            removeComments: true,     //移除注釋
            collapseWhitespace: true //移除空格
          }
          //chunks: ['main','aaa'],      //生成html頁面后的script文件的引入
          //excludeChunks: ['bbb','ccc']  //排除沒有用到的script文件，其他的都引進來，比chunks更好匹配
       }),
       new webpack.LoaderOptionsPlugin({
          options: {
             postcss: [     //瀏覽器自動補全前綴
                require("autoprefixer")({
                   browsers: ["last 5 versions"]
                })  
             ]     
          }   
       })
       /*,
       new htmlWebpackPlugin({       
          filename: 'b.html',
          template: 'index.html',   
          inject: 'body',          
          title: "this is b.html",
          //chunks: ['bbb'],
          //excludeChunks: ['aaa','ccc']
       }),
       new htmlWebpackPlugin({       
          filename: 'c.html',
          template: 'index.html',   
          inject: 'body',          
          title: "this is c.html",
          //chunks: ['ccc'],
          //excludeChunks: ['aaa','bbb']
       })*/
    ],
    module:{
       rules: [    //1.0的是loaders
          //處理js中的loader
          {
            test: /\.js$/,
            loader: 'babel-loader',
            include: path.resolve(__dirname,'/src'),               //指定打包的文件
            exclude: path.resolve(__dirname,'/node_modules')      //排除打包的文件，加速打包時間
          },
          //處理css中的loader
          {
            test: /\.css$/,
            loader: 'style-loader!css-loader?importLoaders=1!postcss-loader'  //@import進來的樣式在問號后加 
          },
          //處理sass中的loader
          {
            test: /\.scss$/,
            loader: 'style-loader!css-loader!postcss-loader!sass-loader' 
          },
          //處理html模板中的loader
          {
            test: /\.html$/,
            loader: 'html-loader'
          },
           //處理ejs模板中的loader,以.tpl后綴結(jié)尾的
           {
             test: /\.tpl$/,
             loader: 'ejs-loader'
           },
           //處理圖片中的loader,file-loader,url-loader,image-webpack-loader相互配合(圖片格式轉(zhuǎn)換base64 圖片壓縮)
           {
             test: /\.(png|jpg|gif|svg)$/i,  //模板中的圖片放相對路徑: src="${require('../imgs/aaa.jpg')}"
             loader: 'url-loader'
           }
       ]
    }
    
}
配置后的東西可以在這里看到package.json( 也可在這里設(shè)置其他 )：
{
  "name": "webpack-demo",
  "version": "2.0.0",
  "description": "wabpack demo",
  "main": "index.js",
  "babel": {
    "presets": [
      "latest"
    ]
  },
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8081",
    "build": "cross-env NODE_ENV=production webpack --progress --colors --display modules --display reason --hide-modules"
  },
  "keywords": [
    "wabpcck"
  ],
  "author": "wu",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "babel": "^6.23.0",
    "babel-core": "^6.24.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-latest": "^6.24.0",
    "babel-runtime": "^6.23.0",
    "css-loader": "^0.28.0",
    "ejs-loader": "^0.3.0",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "image-webpack-loader": "^3.3.0",
    "imagemin-pngquant": "^5.0.0",
    "install": "^0.8.8",
    "loader": "^2.1.1",
    "node-sass": "^4.5.2",
    "postcss-loader": "^1.3.3",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.3.3"
  }
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • GitChat技術(shù)雜談 前言 本文較長，為了節(jié)省你的閱讀時間，在文前列寫作思路如下： 什么是 webpack，它要...
    蕭玄辭閱讀 12,891評論 7贊 110
  • 寫在開頭 先說說為什么要寫這篇文章, 最初的原因是組里的小朋友們看了webpack文檔后, 表情都是這樣的: (摘...
    Lefter閱讀 5,442評論 4贊 31
  • webpack 介紹 webpack 是什么 為什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert閱讀 6,667評論 2贊 71
  • 1. 新建一個文件夾,命名為 webpack-cli , webpack-cli 就是你的項目名,項目名建議使用小...
    魯大師666閱讀 1,650評論 1贊 3
  • 記得2004年的時候，互聯(lián)網(wǎng)開發(fā)就是做網(wǎng)頁，那時也沒有前端和后端的區(qū)分，有時一個網(wǎng)站就是一些純靜態(tài)的html，通過...
    陽陽陽一堆陽閱讀 3,457評論 0贊 5

友情鏈接更多精彩內(nèi)容