webpack 的基本配置和使用方法

最新推荐文章于 2024-09-27 11:59:02 发布

爱人BT

最新推荐文章于 2024-09-27 11:59:02 发布

阅读量454

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/u011146423/article/details/88839277

版权

本文详细介绍了webpack的基本概念，配置文件webpack.config.js的设置，包括本地服务器搭建、Source Maps的生成，Loaders如Babel的使用，以及CSS样式处理。还讲解了Webpack的Plugins，如HtmlWebpackPlugin和Hot Module Replacement，并探讨了产品发布环境的构建和缓存策略。

摘要由CSDN通过智能技术生成

一、什么是webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack 中文文档

安装

npm install webpack webpack-dev-server webpack-cli -S-D

在webpack 3中，webpack本身和它的CLI都是在同一个包中，但在最新版中，已经将两者分开。这就意味着如果webpack和webpack-cli是局部安装在项目中，要使用webpack命令必须进入node_modules/.bin/webpack才能执行webpack命令（.bin目录包含的是一系列可以执行的命令），所以先把 webpack-cli 安装在全局中（项目中也得安装依赖），就不需要进入bin目录，webpack就能寻找到命令路径。

二、webpack.config.js 的基本配置

webpack 配置中文文档

const HtmlWebpackPlugin = require('html-webpack-plugin');

// 该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
        entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
        output: {
            path: __dirname + "/build",
            filename: "bundle-[hash].js"
        },
        devtool: 'none',        
        devServer:{
            contentBase: "./src",      //本地服务器的搭建目录，默认为当前目录       
            historyApiFallback:true,      //是否启动跳转，true不启动
            inline:true,                  //实现自动刷新（必须在命令行输入--inline）
            progress:true,                //显示打包进程（必须在命令行输入--hot）
            hot:true,                     //实现热加载         
            port:8080,                    //设置端口
            congress：true,               //支持压缩
            open: true,                   //自动打开浏览器
        },
        module: {
            rules: [{
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                }, {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [{
                            loader: "css-loader",
                            options: {
                                modules: true,
                                localIdentName: '[name]__[local]--[hash:base64:5]'
                            }
                        }, {
                            loader: "postcss-loader"
                        }],
                    })
                }
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("style.css")
    ]
};

二、使用webpack构建本地服务器

想不想让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖

npm install --save-dev webpack-dev-server

devserver作为webpack配置选项中的一项，以下是它的一些配置选项，更多配置可参考这里

devserver的配置选项	功能描述
contentBase	默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
port	设置默认监听端口，如果省略，默认为”8080“
inline	设置为`true`，当源文件改变时会自动刷新页面
historyApiFallback	在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为`true`，所有的跳转将指向index.html

把这些命令加到webpack的配置文件中，现在的配置文件webpack.config.js如下所示

module.exports = {
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "./src",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } 
}

在package.json中的scripts对象中添加如下命令，用以开启本地服务器：

package.json文件文档

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot --inline"
  },

在 package.json scripts选项中设置了 webpack-dev-server 各选项，在webpack.config.js中就不用设置devServer选项了。