Webpack_webpack --open-CSDN博客

1 安装

npm i -g wepack

2. 编写配置

遵循最基本的Nodejs书写规范

export default 12 … 导出整个模块就是12

export a 12 导出a

ES6 有import export属性，但是所有的浏览器都不支持

module.exports = {
    //
    entry: 'src/1.js',
    output: {

    }

}

./表示当前目录

默认叫 webpack.config.js
自定义文件名: webpack –config 你自己起的不知道什么名字

ES6 模块化

export default  // 作为模块本身被输出    

import xxx from '././'

export let a=12,b=5 // 输出模块的东西  import {a,b} from './'

webpack基本配置

module.exports = {
    entry: './src/1.js',
    output: {
        path: pathlib.resolve('dest/'), //输出目录
        filename: 'bundle.js' //输出文件名
    }

}

webpack的功能：解决ES6的语法，import export和打包的功能

多入口问题

module.exports = {
    entry: {
        名字: '入口文件地址',
        src: './src.js'
    },
    output: {
        path: pathlib.resolve('dist/'), //输出目录  entry:  __dirname + "/dist",
        filename: '[name].bundle.js' //name是一个占位符
    }
}

dev-server

帮助你在服务器环境下去测试页面

1. 安装

npm i webpack webpack-cli webpack-dev-server -D


#webpack-cli    是一个命令行工具
npm i -g webpack

#webpack        是一个库
npm i webpack

webpack-cli会提供命令行工具，server会用到cli

module.exports = {
    entry: {
        名字: '入口文件地址',
        src: './src.js'
    },
    output: {
        path: pathlib.resolve('dist/'), //输出目录
        filename: '[name].bundle.js' //name是一个占位符
    },
    devServer: {
        contentBase: path.resolve('static'), //静态文件，内容根目录
        port: 8090, //监听端口
        inline: true,  //刷新当前页面
        historyApiFallback: true   //利用HTML5 history API，所有的跳转将指向index.html
    }
}

2. 实时刷新 Dev-server

webpack-dev-server --inline --config 2.config.js  // 全页面刷新
webpack-dev-server --iframe --config 2.config.js  //页面嵌在iframe里面，刷新这个iframe

JS模块刷新
hot: true //热更新
plugins: [
    new Webpack.HotModuleReplacementPlugin() // 热更新模块
],

HTML
watch监听静态资源
npx webpack-dev-server --watch --inline --config webpack1.config.js

historyApiFallback: true

在package.json中添加命令，快捷使用
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”,
“start”: “webpack”,
“server”: “webpack-dev-server –open”
},

start是特殊指令，可以直接npm start
其他命令要用 npm run server

3. webpack 插件 loader 翻译

配置选项：

test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
loader：loader的名称（必须）
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）

babel-loader

用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。

babel-loader 给webpack用的
babel-core babel核心库
babel-preset-env 环境预设

module: {
    rules: [
        {
            test: 正则,
            use: loader
        }
    ]
}

React
react react-dom

assets/ 放资源

css-loader

使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项

devtool: 'eval-source-map',

css

可以在js中import css文件，通常情况下，css会和js打包到同一个文件中，并不会打包为一个单独的css文件，不过通过合适的配置webpack也可以把css打包为单独的文件的。

处理css文件使得只在当前页面有效，不污染全局

{
    test: /\.css$/,
     use: [
         {
             loader: "style-loader"
         }, {
             loader: "css-loader",
             options: {
                 modules: true, // 指定启用css modules
                 localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
             }
         }
     ]
 }

postcss

postcss-loader 和 autoprefixer（自动添加前缀的插件）

{
     test: /\.css$/,
      use: [
          {
              loader: "style-loader"
          }, {
              loader: "css-loader",
              options: {
                  modules: true
              }
          }, {
              loader: "postcss-loader"
          }
      ]
  }

typescript 微软，
因为
1. JS太恶心，自身缺乏很多东西
2. 微软历史上就跟语言过不去。试图用ts统治世界

好处：
1. 补充了JS没有的特性——类型，抽象，接口
2. 严谨——胜任大型开发

ts-loader

安装：

npm -g i typescript

插件（Plugins）

loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用

使用插件的方法

//给打包后代码添加版权声明的插件
plugins: [
   new webpack.BannerPlugin('版权所有，翻版必究')
],