webpack webpack.config.js配置

時間 2019-11-19

標籤 webpack webpack.config.js config 配置欄目 JavaScript 简体版

原文原文鏈接

安裝指定版本的webpackjavascript

npm install webpack@3.6 -gcss

安裝live-server 運行項目插件輸入live-server 運行後自動打開網頁html

npm install -g live-serverjava

webpack.config.jswebpack

 
  const 
  path = 
  require( 
  'path'); 
 
  module. 
  exports = { 
 
  entry:{ 
 
  entry: 
  './src/entry.js', 
 
  entry2: 
  './src/entry2.js' 
 
   }, 
 
  output:{ 
 
  path: 
  path. 
  resolve( 
  __dirname, 
  'dist'), 
 
  //filename:'bundle.js' 
 
  //[name] 自動匹配js名稱 
 
  filename: 
  '[name].js' 
 
   }, 
 
  module:{}, 
 
  plugins:[], 
 
  //熱更新 
 
  devServer:{ 
 
  //文件地址 
 
  contentBase: 
  path. 
  resolve( 
  __dirname, 
  'dist'), 
 
  //IP 
 
  host: 
  '174.16.10.160', 
 
  //文件壓縮 
 
  compress: 
  true, 
 
  //端口 
 
  port: 
  8008 
 
   } 
 
   }

module.exports={
    //入口文件的配置項
    entry:{},
    //出口文件的配置項
    output:{},
    //模塊：例如解讀CSS,圖片如何轉換，壓縮
    module:{},
    //插件，用於生產模版和各項功能
    plugins:[],
    //配置webpack開發服務功能
    devServer:{}
}

entry：配置入口文件的地址，能夠是單一入口，也能夠是多入口。
output：配置出口文件的地址，在webpack2.X版本後，支持多出口配置。
module：配置模塊，主要是解析CSS和圖片轉換壓縮等功能。
plugins：配置插件，根據你的須要配置不一樣功能的插件。
devServer：配置開發服務功能，後期咱們會詳細講解。

webpack配置了熱更新須要安裝webpack-dev-serverweb

安裝 webpack-dev-server webpack是3.6版本對應 webpack-dev-server 2.9.4版本npm

npm install webpack-dev-server@2.9.4 --save-devjson

而後修改package.json緩存

 
  "scripts": { 
 
  "server": 
  "webpack-dev-server" 
 
   }

css打包 webpack-dev-server

在./src/css/index.css 簡歷index.css文件

body{
    background-color:#f00;
    color:#fff;
}

在entry.js引入css文件

import css from './css/index.css';

document.getElementById('title').innerHTML='Hello jason';

style-loader:

它是用來處理css文件中的url()等，npm中的網址：https://www.npmjs.com/package/style-loader

用npm install 進行項目安裝：

npm install style-loader --save-dev

css-loader：

它是用來將css插入到頁面的style標籤。npm中的網址：https://www.npmjs.com/package/css-loader

用npm install 進行項目安裝：

npm n install --save-dev css-loader

兩個loader都下載安裝好後，咱們就能夠配置咱們loaders了。

修改webpack.config.js中module屬性中的配置代碼以下：

webpack.config.js

第一種:

module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
          ]
    },

第二種:

    module:{
        rules: [
            {
                test: /\.css$/,
                loader: ['style-loader','css-loader']
                
            }
        ]
    },

第三種: 經常使用方式, 能夠擴展

    module:{
        rules: [
            {
                test: /\.css$/,
                use: [{
                    loader: 'style-loader'
                },{
                    loader: 'css-loader'
                }]
                
            }
        ]
    },

JS壓縮 (插件配置：配置JS壓縮)

webpack.config.js 引入 uglify.js

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
module.exports = {
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    output:{
        path: path.resolve(__dirname, 'dist'),
        //filename:'bundle.js'
        //[name]  自動匹配js名稱
        filename:'[name].js'  
    },
    module:{
        rules: [
            {
                test: /\.css$/,
                //use: ['style-loader','css-loader']
                //loader: ['style-loader','css-loader']
                use: [{
                    loader: 'style-loader'
                },{
                    loader: 'css-loader'
                }]
                
            }
        ]
    },
    plugins:[
        new uglify
    ],
    //熱更新  須要安裝 webpack-dev-server2.9.4  對應 webpack3.6版本
    //而後修改 package.json
    /*
    *"scripts": {
    *   "server": "webpack-dev-server"
    *}
    */
    devServer:{
        //文件地址
        contentBase: path.resolve(__dirname, 'dist'),
        //IP
        host: '174.16.10.160',
        //文件壓縮
        compress: true,
        //端口
        port: 8008
    }

}

而後webpack 打包就能夠看到js文件壓縮了

Html 打包

1. 先安裝html 打包壓縮插件

介紹網址: https://www.npmjs.com/package/extract-text-webpack-plugin

npm install --save-dev html-webpack-plugin

2. 而後配置webpack.config.js文件, 先引入 html-webpack-plugin插件

const htmlPlugin = request('html-webpack-plugin');

3. 最後插件配置代碼

const path = require('path');
//引入js打包插件
const uglify = require('uglifyjs-webpack-plugin');
//引入html打包插件
const htmlPlugin = require('html-webpack-plugin');

module.exports = {
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    output:{
        path: path.resolve(__dirname, 'dist'),
        //filename:'bundle.js'
        //[name]  自動匹配js名稱
        filename:'[name].js'  
    },
    module:{
        rules: [
            {
                test: /\.css$/,
                //use: ['style-loader','css-loader']
                //loader: ['style-loader','css-loader']
                use: [{
                    loader: 'style-loader'
                },{
                    loader: 'css-loader'
                }]
                
            }
        ]
    },
    plugins:[
        //new uglify,
        new htmlPlugin({
            minify: {
                removeAttributeQuotes: true
            },
            hash: true,
            template: './src/index.html'
        })
    ],
    //熱更新  須要安裝 webpack-dev-server2.9.4  對應 webpack3.6版本
    //而後修改 package.json
    /*
    *"scripts": {
    *   "server": "webpack-dev-server"
    *}
    */
    devServer:{
        //文件地址
        contentBase: path.resolve(__dirname, 'dist'),
        //IP
        host: '174.16.10.160',
        //文件壓縮
        compress: true,
        //端口
        port: 8008
    }

}