webpack从零到一（1）

使用webpack4+,所以推荐 node版本8.5以上

在webpack中所有文件都被当成模块

初始化package.json

npm init -y

全局安装webpack（开发不推荐使用）

npm install webpack -g

本地安装

npm install webpack webpack-cli -D

　　webpack4.0+ 需要安装 webpack-cli 插件，-D 代表开发的时候使用，发布时不会使用到。

在webpack中所以文件都是模 -js 模块模块化（AMD CMD es6Module commonjs）

npx webpack

直接允许webpack，会允许node_modules 对应的bin下的webpack.cmd

webpack 配置

文件名：webpack.config.js

　　需要导入的模块

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//自动打包html到生产目录文件下
const {CleanWebpackPlugin } = require('clean-webpack-plugin');//自动清除文件
const Webpack = require('webpack');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')//抽离成css文件
const cssExtract = new ExtractTextWebpackPlugin('css/index.css')
const css1Extract = new ExtractTextWebpackPlugin('css/main.css')
const PurifycssWebpack = require('purifycss-webpack')//清除多余的样式
const glob = require('glob')//搜索样式
const CopyWebpackPlugin = require('copy-webpack-plugin')//拷贝作用

注意：所以配置都是在module.exports = {} 对象内

1 入口及出口文件配置

（1）单文件配置

entry:'./src/index.js',//入口
output:{
　　filename:'build.js',
　　chunkFilename:'[name].chunk.js',//非html引入的js文件
　　path:path.resolve('./build') 
}//出口

　　其中filename的属性值，build文件名可以任意名

　　（2）引入多个js到同一个html文件中

entry:['index.js',.....]

　　entry为数组，即可引入多个js文件

　　（3）定义多个入口文件及出口文件

//定义多文件html时，需要使用对象
entry:{
　　index:'./src/index.js',
　　a:'./src/a.js'
},
output:{
　　filename:'[name].[hash:8].js'，
　　path:path.resolve('./build') 
}

　　entry需要为对象类型，属性名为文件名，属性值为目标文件路径

　　output对象内，name为entry的属性名

　　这里有需要注意的一个点，多个html文件可能会引入不同的js，所以有如下配置

npm install html-webpack-plugin -D

plugins:[
　　　new HtmlWebpackPlugin({
　　　　　　filename:'a.html',//html文件名
　　　　　　template:'./src/index.html'
　　　　　　title:'哈哈',
　　　　　　hash:true,
　　　　　　minify:{
　　　　　　　　removeAttributeQuotes:true,//去除属性的双引号
　　　　　　　　collapseWhitespace:true//html代码全部在一行
　　　　　　},
　　　　　　chunks:['index']//多文件配置，需要引入的js文件
　　　　},
　　　　new HtmlWebpackPlugin({
　　　　　　filename:'b.html'
　　　　　　template:'./src/index.html'　　
　　　　　　title:'哈哈',
　　　　　　hash:true,
　　　　　　minify:{
　　　　　　　　removeAttributeQuotes:true,//去除属性的双引号
　　　　　　　　collapseWhitespace:true//html代码全部在一行
　　　　　　},
　　　　　　chunks:['a']//多文件配置
　　　　}　　　
　　)
]

　　2 开发阶段使用的服务器配置

webpack-dev-server -D

devServer:{
　　contentBase:'./build',//服务器开启时默认路径，生成的build是在内存中，若内存没有则找硬盘的文件
　　port:3000,//端口号
　　compress:true,//压缩服务器
　　open:true，//自动打开浏览器
　　hot:true//启动热更新
},

　　2.1 package.json配置快捷键

“scripts”:{
    "build":"webpack",
    "start":"webpack-dev-server"
}

　　现在可使用 npm run dev 或者 npm run build 来开启服务器或者打包文件

　　3 支持css等非js模块配置

npm install style-loader css-loader -D

module:{
　　rules:[//读取是由右往左写
　　　　{
　　　　　　test:/\.css$/,use:[
　　　　　　　　{loader:'style-loader',options:''},
　　　　　　　　{loader:'css-loader',
　　　　　　　　　options:{
　　　　　　　　　importLoaders:2　//作用：当css文件引用css文件时，可以再加载 postcss-loader等　
　　　　　　　　　　modules:true　 //作用：模块化，去除css耦合
　　　　　　　　　}
　　　　　　
　　　　　　　　}　　//有热更新功能
　　　　　　]
　　　　}
　　]
}

　　缺点，所有样式都内联到html中，但是实际上是写入到js文件中。当css样式多时，会造成js文件过大

　　所以采用，抽离样式，抽离到css文件，通过css文件引用。有两种插件，推荐使用第一种，如下：

npm install extract-text-webpack-plugin@next -D  //稳定（建议使用）

npm install mini-css-extract-plugin -D　　　　　　//不太稳定

　　（1）抽离为一个文件

module: {
    rules: [{
         test: /\.css$/,
         use: ExtractTextWebpackPlugin.extract({
              use: [
                  { loader: 'css-loader' }
              ]
         })
    }]
}，
plugins: [
   new ExtractTextWebpackPlugin({
        filename: 'css/index.css'　　//抽离出的文件名及路径
   })
]

　　（2）抽离为两个文件

const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')//抽离成css文件
const cssExtract = new ExtractTextWebpackPlugin('css/index.css')
const css1Extract = new ExtractTextWebpackPlugin('css/main.css')

module: {
       rules: [{
           test: /\.css$/,
           use: cssExtract.extract({
               use: [
                   { loader: 'css-loader' }
               ]
           })
       }]
 },
plugins: [
        cssExtract,
        css1Extract
]

　　缺点，抽离css文件，只是当发布时才使用。如果在开发中，则作用不大，所以使用下列代码段

　　（3）禁用抽离，使用内联样式

const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')//抽离成css文件
const cssExtract = new ExtractTextWebpackPlugin({
   filename:'css/index.css',
   disable:true            
})
module: {
       rules: [{
           test: /\.css$/,
           use: cssExtract.extract({
               fallback:'style-loader'
               use: [
                   { loader: 'css-loader' }
               ]
           })
       }]
}

　　3.1 引用css文件时，只调用用到的样式插件

npm i purifycss-webpack purify-css glob -D

const PurifycssWebpack = require('purifycss-webpack')
const glob = require('glob')

plugins：[
   new PurifycssWebpack({
       paths:glob.sync(path.resolve('src/*.html'))   
    })   
]

　　注意：使用 new PurifycssWebpack() 时，需要在 HtmlWebpackPlugin() 后面

　　3.2 自动在样式添加前缀

npm i postcss-loader autoprefixer -D

module: {
       rules: [{
           test: /\.css$/,
           use: cssExtract.extract({
               fallback:'style-loader'
               use: [
                   { loader: 'css-loader' },
                   { loader:'postcss-loader'}
               ]
           })
       }]
}

　　　　创建 postcss.config.js

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

　　4 启动热更新配置

plugins:[
　　new Webpack.HotModuleReplacementPlugin(),//启动热更新，热更新：只更新一部分。
　　　　　　　　　　　　　　　　　　　　//如不配置，则更新全部，插件，vuex等全部更新并且丢失
]

　　在js文件下

if(module.hot){
    module.hot.accept();    //页面更新，则刷新
   module.hot.accept('./a.js',function(){
       /******/
   })  
}

　　5 每次运行清除build下的文件配置

npm install clean-webpack-plugin -D

plugins:[
    new CleanWebpackPlugin(),　　//清除build文件夹下的文件
]

　　6 拷贝插件

　　不打包不压缩，只启动复制的作用

npm i copy-webpack-plugin -D

plugins:[
    new CopyWebpackPlugin([{
          from:'./src/doc',
          to:'public'
    }]
)]

posted @ 2019-08-15 22:34 WernerWu 阅读(147) 评论(0) 编辑收藏举报

刷新页面返回顶部