webpack

webpack

• 是一个现代javaScript应用程序的模块打包器，将浏览器不能直接运行的拓展语言转换成可识别格式共浏览器使用

webpack安装

npm install webpack@3.11.0 -g

webpack使用

• webpack 输入文件路径 打包后文件路径
• webpack-config

1. 配置webpack.config.js

var path = require('path')

module.exports = {
  // 入口文件配置
  entry: "./src/app.js",

  // 出口文件配置项
  output: {
    // 输出的路径，webpack2起就规定必须是绝对路径
    path: path.join(__dirname, 'dist'),
    // 输出文件名字
    filename: "bundle.js"
  }
}

2. 运行webpack

• webpack-dev-server

1. npm init -y
2. 安装 npm i webpack-dev-server@2.9.7 webpack@3.11.0 -D
3. index.html修改<script src="/dist/bundle.js"></script>
4. 运行 webpack-dev-server 或 webpack-dev-server --inline --hot --open --port 8090
5. 配置script "dev": "webpack-dev-server --inline --hot --open --port 8090" 后可用 npm run dev 运行

 var path = require('path')

  module.exports = {
    // 入口文件配置
    entry: "./src/app.js",

    // 输出配置
    output: {
      // 输出的路径
      path: path.join(__dirname, 'dist'),
      // 静态资源在服务器上运行时的访问路径，可以直接http://localhost:8080/dist/bundle.js访问到服务器中的bundle.js文件
      publicPath: '/dist',
      // 输出文件名字
      filename: "bundle.js"
    }
  }    

• webpack-css

1. 安装 npm install css-loader style-loader --save-dev

module: {
    rules: [
      // 配置的是用来解析.css文件的loader(style-loader和css-loader)
      {
        // 1.0 用正则匹配当前访问的文件的后缀名是  .css
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] //webpack底层调用这些包的顺序是从右到左
      }
    ]
  }

• webpack-less&webpack-sass

1. 安装 npm install less less-loader sass-loader node-sass --save-dev

{
    test: /\.less$/,
    use: [{
        loader: 'style-loader'
    }, {
        loader: 'css-loader'
    }, {
        loader: 'less-loader'
    }]
},    

{
    test: /\.scss$/,
    use: [{
        loader: 'style-loader'
    }, {
        loader: 'css-loader'
    }, {
        loader: 'sass-loader'
    }]
}

• webpack-图片&字体

1. 安装 npm install file-loader url-loader --save-dev

{
    test: /\.(png|jpg|gif)/,
    use: [{
        loader: 'url-loader',
        options: {
          // limit表示如果图片大于50000byte，就以路径形式展示，小于的话就用base64格式展示
            limit: 50000
        }
    }]
}

• webpack-html

1. 安装 npm install html-webpack-plugin --save-dev
2. 如果添加了title，需要在模板中添加 <%= htmlWebpackPlugin.options.title %>

// 注意需要注释掉publicPath，不然会冲突

var HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'template.html'
    })
]