webpack

参考自 https://segmentfault.com/a/1190000006178770

Webpack可以看作是模块打包工具：所做的事情就是：分析项目结构，找到javascript模块及其他浏览器不能直接运行的扩展语言（Scss、TypeScript等），并将其打包为合适的格式以供浏览器使用。

Webpack的工作方式：把项目当作一个整体，通过一个给定的主文件（入口文件）index.js，Webpack将从这个文件开始找到项目所有的依赖文件，使用loaders处理它们，最后打包为一个浏览器可是别的js文件。

步骤：1空文件夹中npm install -g webpack; 2 npm init自动创建package.json文件包含当前项目的依赖模块，自定义脚本任务等；3 npm install --save-dev webpack 本项目中安装webpack作为依赖包

4 目录结构 app文件夹用来存放 原始数据 和 即将要写的 js模块，public文件夹用来存放准备给浏览器读取的数据（包括用webpack生成的打包后的js文件和index.html（此唯一目的就是加载打包后的js文件）文件.

webpack的使用

方法一；命令行中使用：webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}

方法二：通过配置文件使用：根目录下创建webpack.config.js的文件，

webpack功能：

1调试

生成Source Maps ,提供一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，更易调试。

配置sorce maps 需要配置devtool：'eval-source-map'

2 构建本地服务器，监测代码的修改

基于node.js构建，安装组件 npm install --save-dev webpack-dev-server

devtool:'eval-source-map'，

devServer:{contentBase:'./public',colors:true,historyApiFallback:true,inline:true

3 Loaders 

webpack通过调用外部脚本或工具可以对各种各样的格式文件进行处理，分析JSON文件转换为javascript文件，或把ES6转换为js，jsx转换为js。

单独安装且在modules关键字下进行配置：test:一个匹配要处理的文件的拓展名的正则表达式；loader：名称；include/exclude手动添加必须处理的文件，或屏蔽不需要处理的文件；query：为loaders提供额外的设置选项。

npm install --save-dev json-loader

4.Babel

Babel是一个js编译平台，可以编译ES6、ES7、JSX

安装依赖包npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

npm -install --save react react-dom

5.一切皆模块 CSS

webpack提供两个工具处理样式表，css-loader和style-loader,  css-loader能够使 @import 和 url(...)的方法实现require()的功能；style-loader将所有的计算后的样式加入页面中，  两者组合在一起能使样式表潜入到webpack打包后的js文件中。

npm install --save-dev style-loader css-loader

6 CSS预处理器Sass Less

 

PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。

npm install --save-dev postcss-loader autoprefixer

使用在webpack配置文件中进行设置，只需新建一个postcss关键字，并在里面声明依赖的插件

7 Plugins插件

在整个构建过程中生效，执行相关任务。区别：loaders是在打包构建过程中用来处理源文件的jsx scss less..，一次处理一个，插件并不能直接操作单个文件，他直接对整个构建过程起作用。

使用：1npm安装  2 在plugins关键字部分添加该插件的一个实例

推荐插件：htmlWebpackPlugin(依据简单的模版生成最终的html5文件，且自动引用了打包后的js文件。

npm install --save-dev html-webpack-plugin 

 

ll＝＝＝＝＝＝＝＝＝＝

安装eslint，检查js语法报错，npm install eslint eslint-config-enough  eslint-loader --save-dev

devDependencies,存储打包工具和测试工具用到的包，如eslint,webpack;浏览器中执行的js用到的包保存到dependencies中。如jQuery

.gitignore 里指定忽略node_modules目录和里面的文件，则从git上拉下来的项目没有依赖包，徐执行npm install

loder:配置各种类型文件的加载器，称之为loader；webpack当遇到import...时，会调用这里配置的loader对引用的文件进行编译

url-loader:接受一个limit参数，当文件体积小于limit时，url-loader把文件转为Data URL的格式内敛到引用的地方；当文件大雨limit时，url-loader会吊用file-loader，把文件储存到输出目录，并把引用的文件路径改写为输出后的文件路径

plugins：plugin和loader的区别是，loader是在import时根据不同的文件名，匹配不同的loader对这个文件作处理。

而plugin，关注的不是文件的格式，而是在编译中的各个阶段，会触发不同的事件，让你可以干预编译的不同阶段。

html-webpack-plugin是打包作为入口的html文件的，template参数指定入口html文件路径，打包后存储为html文件（index.html）到输出目录；entry配置的入口是js文件。

devServer：配置开发时用的服务器，配置热更新功能hot:true,port:8080,historyApiFallback:true(当访问文件不存在时，返回根目录下的index.html文件)。    process.env.NODE_ENV =='dev'

运行开发环境用的webpack-dev-server       ./node_modules/.bin/webpack-dev-server -d --hot    在package.json的script配置"dev":"webpack-dev-server -d --hot"

编译生产环境的代码 ./node_modules/.bin/webpack -p    在package.json里配置"build":"webpack -p"    运行命令npm run build；来打包生产环境的代码。

指定静态资源的URL路径前缀

现在我们的资源文件的url直接在根目录, 比如http://127.0.0.1:8100/index.js, 这样做缓存控制和CDN都不方便, 我们需要给资源文件的url加一个前缀, 比如
http://127.0.0.1:8100/assets/index.js这样. 我们来修改一下webpack配置:

{
  output: {
    publicPath: '/assets/'
  },

  devServer: {
    // 指定index.html文件的url路径
    historyApiFallback: {
      index: '/assets/'
    }
  }
}

各个页面分开打包：只需加载当前访问的页面的代码

webpack1使用异步加载文件的方式引用模版：require.ensure();

webpack2 import(...).then()

{
  output: {
    /*
    import()加载的文件会被分开打包, 我们称这个包为chunk, chunkFilename用来配置这个chunk输出的文件名.

    [id]: 编译时每个chunk会有一个id.
    [chunkhash]: 这个chunk的hash值, 文件发生变化时该值也会变. 文件名加上该值可以防止浏览器读取旧的缓存文件.
    */
    chunkFilename: '[id].js?[chunkhash]',
  }
}

＊输出的文件加上hash 值缓存，但开发环境是没有hash值产生的，会报错，则要判断是否为开发环境还是生产环境

{
    /*
    这里entry我们改用对象来定义
    属性名在下面的output.filename中使用, 值为文件路径
    */
    entry: {
      index: './src/index',
    },

    output: {
      /*
      entry字段配置的入口js的打包输出文件名
      [name]作为占位符, 在输出时会被替换为entry里定义的属性名, 比如这里会被替换为"index"
      [chunkhash]是打包后输出文件的hash值的占位符, 把?[chunkhash]跟在文件名后面可以防止浏览器使用缓存的过期内容,
      这里, webpack会生成以下代码插入到index.html中:
      <script type="text/javascript" src="/assets/index.js?d835352892e6aac768bf"></script>
      这里/assets/目录前缀是output.publicPath配置的

      options.dev是命令行传入的参数. 这里是由于使用webpack-dev-server启动开发环境时, 是没有[chunkhash]的, 用了会报错
      因此我们不得已在使用webpack-dev-server启动项目时, 命令行跟上--env.dev参数, 当有该参数时, 不在后面跟[chunkhash]
      */
      filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
    }
  }

*公共模块分开打包 new webpack.optimize.CommonsChunkPlugin

{
    // entry中加入vendor
    entry: {
      vendor: './src/vendor',
      index: './src/index'
    },

    plugins: [
      /*
      使用CommonsChunkPlugin插件来处理重复代码
      因为vendor.js和index.js都引用了spa-history, 如果不处理的话, 两个文件里都会有spa-history包的代码,
      我们用CommonsChunkPlugin插件来使共同引用的文件只打包进vendor.js
      */
      new webpack.optimize.CommonsChunkPlugin({
        /*
        names: 将entry文件中引用的相同文件打包进指定的文件, 可以是新建文件, 也可以是entry中已存在的文件
        这里我们指定打包进vendor.js

        但这样还不够, 还记得那个chunkFilename参数吗? 这个参数指定了chunk的打包输出的名字,
        我们设置为 [id].js?[chunkhash] 的格式. 那么打包时这个文件名存在哪里的呢?
        它就存在引用它的文件中. 这就意味着被引用的文件发生改变, 会导致引用的它文件也发生改变.

        然后CommonsChunkPlugin有个附加效果, 会把所有chunk的文件名记录到names指定的文件中.
        那么这时当我们修改页面foo或者bar时, vendor.js也会跟着改变, 而index.js不会变.
        那么怎么处理这些chunk, 使得修改页面代码而不会导致entry文件改变呢?

        这里我们用了一点小技巧. names参数可以是一个数组, 意思相当于调用多次CommonsChunkPlugin,
        比如:

        plugins: [
          new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest']
          })
        ]

        相当于

        plugins: [
          new webpack.optimize.CommonsChunkPlugin({
            names: 'vendor'
          }),

          new webpack.optimize.CommonsChunkPlugin({
            names: 'manifest'
          })
        ]

        首先把重复引用的库打包进vendor.js, 这时候我们的代码里已经没有重复引用了, chunk文件名存在vendor.js中,
        然后我们在执行一次CommonsChunkPlugin, 把所有chunk的文件名打包到manifest.js中.
        这样我们就实现了chunk文件名和代码的分离. 这样修改一个js文件不会导致其他js文件在打包时发生改变, 只有manifest.js会改变.
        */
        names: ['vendor', 'manifest']
      })
    ]
  }

*开发环境关闭performance.hints

开发环境中由于文件未压缩，source-map会报warning，所以要关闭此

performance: {
    hints: options.dev ? false : 'warning'
  }

＊开发环境允许其他电脑访问 webpack配置devServer.host 为0.0.0.0

*简化import路径 

resolve: {
  alias: {    别名
    '~': resolve(__dirname, 'src')
  }
}

import b from '../../../components/b'  简化成 '~/components/b'

 

转载于:https://www.cnblogs.com/yxiaoqian/p/6128370.html