webpack webpack.config.js配置

安装指定版本的webpack

npm install webpack@3.6 -g

安装live-server 运行项目插件 输入live-server 运行后自动打开网页

npm install -g live-server

webpack.config.js

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-server

安装 webpack-dev-server webpack是3.6版本 对应 webpack-dev-server 2.9.4版本

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

然后修改package.json

"scripts": {

"server": "webpack-dev-server"

}

css打包

在./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
    }

} 　

• minify：是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。
• hash：为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
• template：是要打包的html模版路径和文件名称。

上边的都配置完成后，我们就可以在终端中使用webpack，进行打包。你会看到index.html文件已经被打包到我们的dist目录下了，并且自动为我们引入了路口的JS文件。

总结：

html文件的打包可以有效的区分开发目录和生产目录，在webpack的配置中也要搞清楚哪些配置用于生产环境，哪些配置用于开发环境，避免两种环境的配置冲突。