webpack学习笔记_<%=htmlwebpackplugin.files.publicpath%>-CSDN博客

本文链接：https://blog.csdn.net/qq_39702364/article/details/81070581

安装：

npm install webpack -g

Webpack打包文件：

webpack --mode development  hello.js --output hello.bundle.js

npm安装插件失败的时候，建议rm -r node_modules，再npm install下

安装loader:

npm install css-loader style-loader  --savr-dev

引入loader:

require('style-loader!css-loader!./style.css');

监听文件的变化：

webpack --mode development  hello.js --output hello.bundle.js --module-bind 'css=style-loade!css-loader' --watch

Webpack设置配置文件:

webpack –config webpack.dev.config.js

使用npm 启动webpack: npm run dev 需要在package.json的scripts配置webpack命令：

"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"

Webpack多入口打包防止文件覆盖:

可使用文件名+hash+chunkhash的方法，其中chunkhash每次都会不同，hash代表的是本次打包hash

安装html-webpack-plugin:

npm install html-webpack-plugin –save-dev

webpack.config.js引入插件：

plugins:[
        new htmlWebpackPlugin({
            template:'index.html',
            inject:'head',
            title:'webpack heloo',
            date: new Date()
        })
    ]

Html-webpack-plugin的模板语法:

<%= htmlWebpackPlugin.options.title %> 
//htmlWebpackPlugin是你在webpack.config.js引入该插件时定义的变量名称

htmlWebpackPlugin存在的两个属性:

files和options,可以通过模板语法和files来定义js文件在head还是body引入

publicPath引入文件配置绝对路径：

output:{
        path:__dirname + '/dist',
        filename:'js/[name]-[chunkhash].js',
        publicPath:'http://b2b.sunrf.cn'
    }

Index.html文件进行压缩minify:

plugins:[
        new htmlWebpackPlugin({
            template:'index.html',
            inject:'head',
            title:'webpack heloo',
            date: new Date(),
            minify:{
                removeComments:true,
                collapseWhitespace:true
            }
        })
    ]

打包多页面：

var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
        main:"./src/script/main.js",
        a:'./src/script/a.js',
        b:'./src/script/b.js',
        c:'./src/script/c.js'
    },
    output:{
        path:__dirname + '/dist',
        filename:'js/[name]-[chunkhash].js',
        publicPath:'http://b2b.sunrf.cn'
    },
    plugins:[
        new htmlWebpackPlugin({
            filename:'a.html',
            template:'index.html',
            inject:'head',
            title:'webpack a',
            date: new Date(),
            // minify:{
            //     removeComments:true,
            //     collapseWhitespace:true
            // },
            // chunks:['main','a'],//包含哪些chunks
            excludeChunks:['b','c'] //排除的chunks
        }),
        new htmlWebpackPlugin({
            filename:'b.html',
            template:'index.html',
            inject:'head',
            title:'webpack b',
            excludeChunks:['a','c']
        }),
        new htmlWebpackPlugin({
            filename:'c.html',
            template:'index.html',
            inject:'head',
            title:'webpack c',
            excludeChunks:['a','b']
        })
    ]
}

优化减少http请求文件，可以使用模板语言来实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script type="text/javascript">
        <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
    </script>
</head>
<body>
    <% for(k in htmlWebpackPlugin.files.chunks) { %>
        <% if (k !== 'main') { %>
            <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[k].entry %>">
               
            </script>
        <% } %>
    <% } %>
</body>

Webpack使用babel-loader转换es6语法：

npm install --save-dev babel-loader babel-core
npm install --save-dev babel-preset-latest

webpack.config.js的module配置babel:

rules: [
            { 
                test: /\.js$/,
                exclude: /node_modules/,//包含的文件夹
                include: /src/,//包含的文件夹
                loader: "babel-loader"
            }
        ]

打包的时候添加浏览器前缀(css后处理器)：

npm install postcss-loader –save-dev
npm install autoprefixer –save-dev

在与webpack.config.js同级目录下添加postcss.config.js文件:

module.exports = {

    plugins: [
  
      require('autoprefixer')({
  
         browsers:['last 5 versions']
  
      })
  
    ]
  
}

Webpack.config.js的module添加postcss:

module:{
        rules: [
            { 
                test: /\.js$/,
                exclude: path.resolve(__dirname,'node_modules'),//包含的文件夹
                include: path.resolve(__dirname,'src'),//包含的文件夹
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                use: [
                  'style-loader',
                  { loader: 'css-loader', options: { importLoaders: 1 } },
                  'postcss-loader'
                ]
            }
        ]
    }

安装less和less-loader:

npm install less –save-dev
npm I install less-loader –save-dev

Webpack.config.js的module添加less-loader:

module:{
        rules: [              
            {
                test: /\.less$/,
                use: [
                  'style-loader',
                  { loader: 'css-loader', options: { importLoaders: 1 } },
                  'postcss-loader',
                  'less-loader'
                ]
            }
        ]
    }

安装html-loader;

npm install html-loader –save-dev
Webpack.config.js的module添加html-loader:
module:{
        rules: [
            {
                test: /\.html$/,
                loader:'html-loader'
            }
    }

安装ejs-loader,用于处理html模板;

npm install ejs-loader –save-dev

Webpack.config.js的module添加ejs-loader:

module:{
        rules: [
            {
                test: /\.tpl$/,
                loader:'ejs-loader'
            }
    }

安装file-loader,用于处理图片

npm install file-loader –save-dev

Webpack.config.js的module添加file-loader:

module:{
        rules: [
            {
                test: /\.(png|jpg|jpeg|svg|gif)$/,
                loader:'file-loader'
            }
    }

extract-text-webpack-plugin在webpack4.0.0以上报错，然后安装了^4.0.0-beta.0版本的extract-text-webpack-plugin（webpack也是4.0.0版本），但是还是没有解决Error: Cannot find module 'webpack/lib/Chunk’这个报错问题，然后我安装了npm install --save-dev mini-css-extract-plugin，又报了Cannot find module ‘webpack’，然后局部安装webpack即可，npm install webpack --save-dev

babel 升级 6.x 到 7.x，之前安装的都是babel-core、plugin-transform-runtime、babel-runtime，现在安装7.x的话变成了@babel/core、@babel/plugin-transform-runtime、@babel/runtime，所以在配置.babelrc文件的时候：

{
  "presets": [
    "env"
  ],
  "plugins": ["transform-runtime"]
}
改成如下
{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}