webpack4json配置,webpack的packagejson文件配置

本文目录一览：

• 1、webpack的配置文件
• 2、webpack4 配置之 postcss-loader
• 3、webpack的打包配置-1修改版
• 4、webpack简单配置，路由配置，接口拦截配置，基本文件配置
• 5、webpack配置
• 6、使用webpack4从0开始打包一个antd项目

webpack的配置文件

webpack 的默认配置文件是 webpack.config.js ,所以在我们的项目根目录下(02webpack-demo)新建一个webpack.config.js的文件，里面啥都不写，这个时候我们在终端中运行 npx webpack ,就会在根目录下生成一个 dist 文件夹，里面有一个 main.js ，这是 webpack 利用默认的配置项为我们打包生成的文件,接下来我们来简单配置一下这个文件里面的内容:

配置好文件后，再次运行 npx webpack ,这个时候在我们的项目目录下就生成了一个 bundle 文件夹，里面有一个 bundle.js 就是 webpack 帮我们翻译好的文件了，在我们的 demo.html 中引入 bundle.js ，在浏览器中打开 demo.html 文件，可以看到我们打印的内容已经正确的出现在了浏览器控制台中了。

我们已经知道了 webpack 的默认配置文件的名字是 webpack.config.js ，那么有没有办法修改这个名字呢？比如我想把这个名字改为 test.config.js 或者其他什么名字，答案是有的，比如我改成了 test.js ，那么在利用 webpack 进行打包的时候就应该运行 npx webpack –config test.js ，打包结果和上面的还是一样的.

在上面的打包过程中，每次打包的时候都要执行 npx webpack 或者 npx webpack –config test.js ,你可能会觉得有点繁琐，我们可以在 package.json 中的 scripts 中配置一个脚本，如下所示:

配置好脚本之后，在终端中执行 npm run bundle 这个命令， webpack 就会重新帮我们打包文件，这里涉及到的知识点是 npm scripts ,它的原理是当我们在终端中执行 npm run bundle 的时候，实际上在运行的就是 package.json 配置中的 bundle 这个命令，而 bundle 这个命令的底层就是在帮我们执行 webpack 这个命令，这里有一个点需要注意，如果我们在 scripts 中以命令的形式去执行 webpack 的时候，首先会在工程目录下的 node-modules 下去找是否安装了 webpack ，如果安装了的话就会直接使用 node-modules 中的 webpack ,但是如果 node-modules 下面没有 webpack ,就会去全局寻找 webpack

1.全局安装的 webpack ,打包的之后在终端中运行 webpack index.js

2.局部安装的 webpack ，打包的之后在终端中运行 npx webpack index.js

3.通过配置 npm scripts 脚本，打包的之后在终端中运行 npm run 你配置的脚本的内容 ，比如我配置的脚本为:

那么在打包的时候运行 npm run test 即可

webpack4 配置之 postcss-loader

postcss-loader 是我们在做项目的时候大多数都会用到的loader之一，它负责进一步处理 CSS 文件，比如添加浏览器前缀，压缩 CSS 等。

1.首先添加 browserslist ，

方法一：在项目根目录添加 .browserslistrc 文件

方法二：在 package.json 文件中添加 browserslist

2.配置 autoprefixer

方法一：在根目录创建 postcss.config.js：

方法二：在 webpack.config.js 中配置：

方法一： postcss.config.js （推荐）

方法二：webpack.config.js 配置

1.使用 style-loader ：

2.使用 MiniCssExtractPlugin

webpack的打包配置-1修改版

1、现在本地创建项目目录

2、然后在index.html中写入html的结构

3、想要先安装jquery，先npm init -y一下， npm install jquery -S 【项目目录安装，必须是小写的jquery，否则会报错】，在index.html引入main.js

4、在main.js中写入内容如下：

使用webpack处理一下，转换成浏览器可以识别的文件 ：

a: 先全局安装一下webpack= npm install webpack@3.5.5 -g

b: 在终端中执行： webpack ./src/main.js【要处理的文件的目录】 ./dist/bundle.js【要输出的文件的目录以及文件名】 ，会在dist中生成一个bundle.js文件，然后在 index.html中引入的main.js文件改成 bundle.js

这样的话每次打包时候都需要执行 webpack ./src/main.js ./dist/bundle.js

c: 为了不手动指定入口和出口文件，在项目根目录中新建一个webpack.config.js（基于node的，所以** **node.js的命令都可以识别）

这样的话，就可以在终端中直接执行命令：webpack就可以直接打包了，但是还有个小问题。就是它不 会自动更新，需要手动刷新一下。下面我们就来解决这个问题。来配置webpack-dev-server

4、使用webpack-dev-server实现自动打包编译

直接安装webpack最高版本的时候，可能会遇到报错的情况，如果对于版本没有要求的话，可以降低版本：

npm install webpack@3.5.5 -D 如果还会有报错出现的话，可以试试使用cnpm安装

需要先在终端中安装webpack-dev-server：具体操作如下：

4.1 npm/cnpm install webpack-dev-server -D 出现下面的提示：【其实此步骤容易出现报错，所以呢，把webpack-dev-server版本修改为@2.9.1=webpack-dev-server@2.9.1时，就不会报错】

4.2 npm/cnpm install webpack -D 【此步骤也是容易出错的，所以安装的时候要和上边的版本保持一致，webpack@3.5.5版本】

4.3 需要在package.json中配置dev

最后直接执行：npm run dev运行成功，但是需要注意的是此时打包成的bundle.js文件不是磁盘中存在bundle.js文件，而是一个与src dist node_module同级的看不见的文件，在index.html引入的路径也要修改以下=》script src=”/bunlde.js”/script

此时，正常打包，但是不自动打开浏览器

发布出来，方便自己查看，有什么不对的地方，希望留言纠正修改。（程序员菜鸟一枚）

webpack简单配置，路由配置，接口拦截配置，基本文件配置

新建项目

  项目脚手架搭建  react

     相关文件

        webpack.config.js

           使用相关插件

              path

              html-webpack-plugin

                html文件处理插件

              clean-webpack-plugin

                清除上次打包文件插件

              copy-webpcak-plugin

                 打包时需要复制的相关文件的插件（比如一些报表文件模版）

              speed-measure-webpack-plugin

                 速度测量插件  （const  SpeedMeasurePlugin = require(“speed-measure-webpack-plugin”);  const smp = new SpeedMeasurePlugin();  const webpackConfig = smp.wrap({}）

              happypack

                一些loader进程管理

              打包配置

                 {

mode:’环境设置’，

  entry：‘入口文件设置’，

  output：｛path：path.resovle(__dirname,’dist’),filename:’main_[hash].js’,publicPath:’根据环境设置url前缀（接口域名代理字符）’｝，

  models：｛rules：［

说明：｛

  test：‘正则匹配／.js／’

  exclude：‘排除。。。（可以设置后缀名或者文件路径）’

  include：‘包含。。。（可以设置后缀名或者文件路径）’

  loader：‘loader设置url－loader’或者use：［loader：‘  ’，oprios：｛plugins：［插件设置］或者其他设置｝］（use［可以设置happy pack插件：happypack/loader ? id = ‘happypack插件配置的id’］）

｝

］｝，（loader配置）

    （loader配置顺序：如，url-loader,babel-loader,style-loader,css-loader,file-loader）

  resolve：｛extensions：［’js’,’json’,’jsx’,’css’］｝，（在导入没有带后缀名的文件时，尝试在文件加入上面后缀名访问）

  plugins：［］    （插件配置）

}

        bable.config.js

           相关插件  (用法function(api){ api.cache(true);

              presets：［

[‘@babel/preset-env’，

                 {‘targets’：｛’browsers’:[“last 2 versions”,”safari = 7”,”ie =9”,”chrome =49”]｝}

],

                 ‘@babel/preset－react’

    ］，

              return { “plugins”:{

      [“@babel/plugin-proposal-decorators”, { “legacy”: true }],(类装饰器  旧：设置legacy时需要loose支持，有顺序)

               @babel/plugin-proposal-dynamic-import, （ import 处理插件）

               @bacel/plugin-transform-runtime，（将helper和polypill都改为从一个统一的地方引入，引入的对象和全局变量完全隔离）

[“@babel/plugin-proposal-class-properties”, { “loose” : true }],(解析类的属性)

               @ babel / plugin-proposal-logic-assignment-operators, （如出现短路时的逻辑处理插件）

               [”@babel/plugin-proposal-optional-chaining”,{loose:false}],(可选链优化  深层嵌套优化处理插件)               

               [”@babel/plugin-proposal-pipeline-operator”,{proposal:’minimal’}],(解析管道运算符)

               [‘@babel/plugin-proposal-nullish-coalescing-operator”,{loose：false}]，（删除无效的合并运算符）

      @ babel / plugin-proposal-do-expressions,( 插件执行一个 do ｛多个条件语句｝表达式，最终语句完成值是该 do 表达式的完成值 )

      @ babel / plugin-transform-spread ，（扩展运算符转换插件）

      [“@babel/plugin-proposal-object-rest-spread”, { “loose”: true, “useBuiltIns”: true }],(转扩展运算插件)

      [“@babel/plugin-transform-object-assign”]，（插件支持Object.assign()）

    ［“import”，｛libraryName: ‘antd’,libraryDirectory: ‘es’,style: true,｝］（and按需引入设置）

} }})

        package.json

           项目打包／启动相关插件

              webpack－dev－server

              webpack－cli

              webpack－merga

      cross-env  (插件解决window系统兼容问题)

        postcss.config.js

            可以做相关的浏览器版本兼容配置

            相关插件

               autoprefixer（｛prefer：false，plugin：loader=[request(autoprefixer)({browsers:[‘ie’=9,’Safari’=6]})]｝｝）

      public文件

        一些公用文件存放

      dist文件（打包后的文件）

      src文件（项目主文件）

        assets文件（存放图片等资源）

        api相关文件（api接口处理文件）

        modules文件或者pages文件

      （store文件）

        utils文件

          request.js（axios拦截文件）

             （相关插件）axios、history（使用：引入createBrowserHistory（现代浏览器使用）、createMemoryHistory（手机端使用））createBrowserHistory（｛basename：‘基链接（环境域名）’，forceRefresh：true  ／是否强制刷新整个页面｝）

                axios.defaults.withCredentials = true;  //设置cross跨域并设置访问权限允许跨域携带cookie信息

                拦截设置：

  axios.interceptors.request.use(function (config) { return config;（请求参数拦截处理，如：请求头添加token或者其他（config.[‘headers’].token=……））}, function (error) { return Promise.reject(error);});

                   axios.interceptors.response.use(function (response) { return response;(请求成功返回参数错误处理，如：返回不同状态码跳转不同页面，token失效重登录……)}, function (error) { return Promise.reject(error);（请求失败错误处理，如：登录失效，跳转重新登录）});

          history.js（路由环境配置）

             配置原理（根据package.json文件里面配置的NODE_ENV==‘production’或者’development’加上webpack.config.js里面的Deserver.proxy设置的代理key来配置开发或者正式环境的url前缀，配合createBrowserHistory.basename设置）

          until.js    （公用方法文件）

        index.js（全局引入，如：utils.request、@babel/polyfill、assets/.peg、路由前缀在路由上全局配置）

        routers.js  （路由文件）

        app.js（正经的组建文件，设置页面大致框架和路由跳转设置，也能做一些全局设置）

        index.html（可以做全局引入三方资源）

————————————————————————————————————————

这里的webpack配置是根据webpack4.30版本配置，算不上目前最新版本，配置也比较繁琐，里面用了happypack快速启动快速打包的多线程插件可能会跟你项目的一些配置方式出现冲突。

webpack配置

一个打包工具

npm install –save-dev webpack : 安装Webpack

npm install webpack webpack-cli –save-dev :此工具用于在命令行中运行 webpack

webpack 开箱即用，可以无需使用任何配置文件。webpack 会假定项目的入口起点为 src/index.js ，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。

在package.json文件中添加命令，然后通过npm run build即可运行打包

但是通常项目还需要继续扩展此能力，为此可以在项目根目录下创建一个 webpack.config.js 文件，然后 webpack 会自动使用它。

也可以根据特定情况使用不同的配置文件，则可以通过在命令行中使用 –config flag 修改此配置文件名称。

每个html页面都有一个入口点，单页面应用：一个入口起点；多页面应用：多个入口起点

mode?: “development” | “production” | “none”;

。。。。。

（webpack 提供合理的默认值，但是还是可能会修改一些解析的细节）

条件的输入值由两种，

在条件中，对 resource 进行匹配的属性有 test / include / exclude / resource

在条件中，对 issuer 进行匹配的属性有 issuer

注：当使用多个条件属性时，需要同时满足，当属性条件为数组时，满足数据中的一个即可

可以对匹配规则的模块进行 应用loader 或者 解析选项对象

oneOf?: RuleSetRule[];

rules?: RuleSetRule[];

webpack配置示例：

使用webpack4从0开始打包一个antd项目

$ npm install -g cnpm –registry= // 安装cnpm

$ mkdir project // 根目录下创建一个名为project的文件夹

$ cd project cnpm init // 进入project文件夹 并初始化该项目 终端会提示一些配置，一路键入enter最后yes即可。 初始化完成会生成一个pakage.json文件

$ cnpm i –D webpack webpack-dev-server webpack-cli // webpack4.x 必须安装webpack-cli。

根目录下新建文件src/index.js

$ npm run build // 此时我们可以执行npm run build 代替npx webpack。 构建成功后根目录下自动生成 dist/main.js。

为什么我们没有对webpack进行任何配置，却可以成功打包？那是因为在没有配置入口文件的情况下， webpack 4.x会自动查找src/index.js作为入口文件进行打包。

这里我们需要了解webpack4个核心概念——入口(entry)、输出(output)、loader、插件(plugins)。

根目录下创建webpack.config.js

$ cnpm run build

我们可以看到根目录下打包出了dist/main.js。

这时候如果我们将webpack.config.js中入口配置改为

$ cnpm run build

重新构建我们发下dist目录下多出了一个app.js文件，上一次打包的main.js还在，如果我们希望每次打包之前先清除掉上一次的打包文件，则需要用到clean-webpack-plugin插件。

$ cnpm i -D clean-webpack-plugin // vesion: 6.13.4 (6.x版本与低版本引入方式不一样)

安装后我们在webpack.config.js里进行配置 。

首先引入clean-webpack-plugin

再在plugins里实例化

$ cnpm run build

重新构建，我们可以看到上一次打包出的dist/app.js已经删掉了。

首先我们在dist目录下手动增加一个index.html文件，引入main.js

在chrome中打开该html文件，我们可以看到控制台中成功打印出hello world

那么问题来了，难道我们每次打包需要手动在dist目录下添加一个html文件吗？ 显然不可能，这时候我们需要用到html-webpack-plugin插件自动添加html文件。

我们先将dist/index.html文件移动到src下，去掉script标签。

$ cnpm i -D html-webpack-plugin

安装好后一样先引入插件 具体插件配置参考官网

$ cnpm run build

此时我们看到dist目录下自动生成了一个index.html文件，里面包含了div id=”root”/div,

这是因为我们在模板文件里写过。之前我们已经安装过了webpack-dev-server，并在package.json脚本里配置了”dev”: “webpack-dev-server” 此时我们可以运行

$ cnpm run dev

终端提示自动运行在localhost:8080, chrome上打开8080端口，查看控制台，我们可以看到打印出了hello world。

$cnpm run dev

这时我们可以看到该项目已经运行在我们制定的端口8989上了。

$ cnpm i -D style-loader css-loader less-loader file-loader url-loader

我们在src目录下新建一个images文件夹，然后拖入一张图片，这里图片名用了smokinggirl.jpeg。 再在src目录下新建一个index.less文件。

然后修改src/index.js src/index.less

src/index.less

webpack.config.js中module部分增加配置

$ cnpm run dev

可以看到有一个宽200px的图片显示出来。

这样打包出来的css 样式会作用到全局，如果页面多可能会相互影响，这时候我们可以启用css模块，配置稍作修改

src/index.js

$cnpm run dev

这时候我们可以看到图片成功显示出来，但仔细观察图片类名，是一串自动生成的字符，与我们自己定义的类名没有半点关系，那么如何显示出我们定义的类名呢？

$ cnpm run dev 这时候可以看到打包出的类名符合我们定义的形式。

但仔细观察，我们发现body还有默认样式，我们可以在index.html引入一个公共样式文件，去除默认样式。

src目录下 新建common/reset-style.css, 写个简单的去默认样式的文件

然后在html模板文件 src/index.html中引入，

这时候我们运行，发现报错找不到该文件。这是因为我们在index.html里引入该文件，但webpack没有打包编译。这时候我们需要用到插件copy-webpack-plugin

$ cnpm i -D copy-webpack-plugin

重新运行，我们可以看到原先的默认样式body的边距已经没有了。

$ npm i -S react react-dom

安装完react、react-dom 还不够，我们需要babel做翻译，才能让浏览器读懂。

$ cnpm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @babel/runtime-corejs2

安装好后根目录新建.babelrc文件。

webpack.config.js 的module里增加babel-loader的配置

配置好我们来写react文件

新建src/page/content/index.js, 将src下的index.less拖入content目录下。

接下来改造src/index.js 入口文件

然后运行 我们可以看到页面正常显示。到这里我们已经可以正确打包并运行react项目了。

$ cnpm i -S antd

根据antd官网描述，我们还需要在入口文件引入一个样式文件。

src/index.js

到这里我们可以发现一个问题，我们对css文件打包的时候启用了模块，很明显这样直接引用是不行的。 antd的样式是从node_modules里引用的，那么我们的思路就是打包css文件时去除掉node_modules里面的文件再启用模块，node_modules里面的文件不启用模块。

接下来我们对webpack.config.json进行改造。

只有这样还不够，我们需要用到babel-plugin-import插件实现按需加载，antd样式应用到全局需要用到此插件。

$cnpm i -D babel-plugin-import

.babelrc

ok现在我们来改造一下src/page/content/index.js文件，引入一个antd组件。

现在我们来运行，发现报了个错

提示我们需要安装一个@babel/plugin-proposal-class-properties插件。

$ cnpm i -D @babel/plugin-proposal-class-properties

然后我们需要在babel的配置文件中加入它

现在我们重新运行 $ cnpm run dev 一个简单的包含antd组件的页面就完成了。

。