使用webpack配置环境

webpack主要做什么
打包
转化
优化

一 首先全局安装webpack

npm install -g webpack
npm install webpack-cli -g

初始化项目生成package.json文件

npm  init

在项目中安装webpack

npm install --save-dev webpack

---

查看是否已经安装好webpack了

webpack -v

二 我们开始 hello world
在初始化文件夹下创建一个src（存放我们编写的js）和dist文件夹（打包完成后的文件）
在src目录下创建entry.js文件

在dist文件夹下创建index.html文件

webpack打包 webpack 入口文件 -o 生成文件

webpack src/entry.js -o dist/bundle.js

hello小?完
下面让我们使用Webpack的配置文件的方式进行设置
配置文件的大体结构和入口出口文件的配置。

首先新建一个文件webpack.config.js文件

const path = require('path');

module.exports = {
  entry: {
    // 入口
    entry: './src/entry.js',
  },
  // 出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    // 打包的文件名称
    filename: 'bundle.js',
  },
  // 模块
  module: {},
  // 插件
  plugins: [],
  // 开发服务
  devServer: {},
};

如何开发多入口出口文件

const path = require('path');

module.exports = {
  entry: {
    // 入口
    entry: './src/entry.js',
    entry2: './src/entry2.js',
  },
  // 出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    // 打包的文件名称
    // filename: 'bundle.js',
    // [name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。
    filename: '[name].js',
  },
  // 模块
  module: {},
  // 插件
  plugins: [],
  // 开发服务
  devServer: {},
};

**然后在终端执行 **

webpack

就会生成两个相同名字的js文件
上面是将不同的js文件生成不同的js文件，如果想把不同的文件生成一个js文件
需要将entry配置文件配置一下

entry: ['./src/entry.js', './src/entry2.js'],

三 服务和热更新

1. npm install webpack-dev-server –save-dev 本地安装
2. 配置一下devServer

  devServer: {
    // 设置基本目录结构
    contentBase: path.resolve(__dirname, 'dist'),
    // 服务器的IP地址，可以使用IP也可以使用localhost
    host: 'localhost',
    // 服务端压缩是否开启
    compress: true,
    // 配置服务端口号
    port: 1717,
  },

然后在命令行执行 webpack-dev-server就可以了，在地址栏输入http://localhost:1717/可以看到效果了
如果报错的话
在package.json 里配置一下

  "scripts": {
    "server":"webpack-dev-server"
 },

Webpack在生产环境中有一个重要的作用就是减少http的请求数

四 CSS文件打包
在webpack.config.js文件中配置，其中loader有多种写法
1 直接用use。
2 把use换成loader。
3 用use+loader的写法。

// 模块
  module: {
    rules: [{
      // test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
      test: /\.css$/,
      // use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；
      use: ['style-loader', 'css-loader'],
      // include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
      // query：为loaders提供额外的设置选项（可选）。
    }],
  },

使用loader来解析CSS文件了，这里我们需要两个解析用的loader，分别是style-loader和css-loader。
style-loader:它是用来处理css文件中的url()等。用npm进行项目安装：

cnpm i style-loader --save-dev

css-loader：它是用来将css插入到页面的style标签。用npm install 进行项目安装：

cnpm i css-loader --save-dev

五 HTML文件的发布

1. 我们先把dist中的html文件剪切到src目录中，并去掉我们的JS引入代码（webpack会自动为我们引入JS），因为这才是我们真实工作的目录文件结构。
   首先引入html-webpack-plugin

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

引入后使用npm进行安装包。

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

然后在webpack.config.js里面配置

    // 插件
  plugins: [
    new HtmlPlugin({
      // minify：是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。
      minify: {
        removeAttributeQuotes: true,
      },
      // hash：为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
      hash: true,
      // template：是要打包的html模版路径和文件名称。
      template: './src/index.html',
    }),
  ],

然后命令行webpack-dev-server就可以看到效果了

六 CSS中的图片处理
在src目录下新建一个images文件夹，把图片放入images文件夹

npm install --save-dev file-loader url-loader

file-loader：解决引用路径的问题
url-loader：如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。

 module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            },{
           //  test:/.(png|jpg|gif)/是匹配图片文件后缀名称。
               test:/\.(png|jpg|gif)/ ,
              //  use：是指定使用的loader和loader的配置参数。
               use:[{
                   loader:'url-loader',
                   options:{
                   // limit：是把小于500000B的文件打成Base64的格式，写入JS
                       limit:500000
                   }
               }]
            }
          ]
    },

七 Less文件的打包和分离
首先安装less

npm install --save-dev less

Less-loader用来打包使用。

npm n install --save-dev less-loader

安装好后，需要在webpack.config.js里编写loader配置，当然要想正确解析成CSS，还是需要style-loader和css-loader的帮助

{
            test: /\.less$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "less-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
 }

八 自动处理CSS3属性前缀
需要安装两个包postcss-loader 和autoprefixer（自动添加前缀的插件）

npm install --save-dev postcss-loader autoprefixer

postCSS推荐在项目根目录（和webpack.config.js同级），建立一个postcss.config.js文件。

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}