mac下webpack入门流程总结

2018-07-11 本文已影响0人 sockball

此文为这篇文章的缩略版

创建项目文件夹
mkdir webpack && cd webpack
初始化生成package.json文件
npm init
安装webpack至该目录(非全局)
- npm install --save-dev webpack
- npm install --save-dev webpack-cli 或 npm install --save-dev webpack-command
创建测试用结构
- mkdir app public
- touch app/Greeter.js app/main.js public/index.html

各文件初始代码

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

app/Greeter.js

const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

app/main.js

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

使用webpack编译
node_modules/.bin/webpack app/main.js public/bundle.js

配置webpack.config.js简化上条命令成 node_modules/.bin/webpack

touch webpack.config.js

module.exports = {
    entry: __dirname + '/app/main.js',   //唯一入口文件
    output: {
        path: __dirname + '/public',    //打包后文件存放位置
        filename: 'bundle.js'          //打包后输出文件文件名
    },
    mode: 'development'               //不配置则浏览器控制台会有提示, 暂不知有何效果
}

配置package.json简化上条命令成 npm start (实际又从npm run start省略来
```
{
    ...
    "scripts": {
        ...
        "start": "webpack"
    }
}
```

为webpack配置source maps ，在webpack.config.js中添加

module.exports = {
    ...
    devtool: 'eval-source-map'              //在同文件中生成source map, 适用于开发环境
}

构建本地服务器

npm install --save-dev webpack-dev-server

module.exports = {
   devServer: {
       contentBase: './public',        //应该是指localhost:8080访问的根目录
       historyApiFallback: true,
       inline: true                      //浏览器监听, 修改文件保存后自动刷新
   }
}

{
    ...
    "scripts": {
       ...
       "server": "webpack-dev-server --open"
    }
}

npm run server

更新文件

touch app/config.json

{
    "greetText": "Hi there and greetings from JSON!"
}

更新app/Greeter.js

var config = require('./config.json');

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = config.greetText;
  return greet;
};

安装Babel

npm install --save-dev babel-core babel-loader babel-preset-env

webpack.config.js中配置Babel

module.exports = {
    ...
    module: {
        rules: [
            ...
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: 'babel-loader'
                    options: {
                        presets: [
                            'env'
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}

更新app/Greeter.js

import config from './config.json';

var greeter = () => {
    let greet = document.createElement('div');
    greet.textContent = config.greetText;
    
    return greet;
}
export default greeter

更新 app/main.js

import greeter from './Greeter';

document.getElementById('root').appendChild(greeter());

将Babel中options配置项分离至新文件.babelrc
```
{
    "presets": ["env"]
}
```

安装并使用style-loader 和 css-loader

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

更新webpack.config.js配置

module.exports = {
    ...
    module: {
        rules: [
            ...
            {
                test: /(\.css)$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    }
}

app下创建main.css，touch app/main.css
```
*{
    margin: 0;
    padding: 0;
}
```
将app/main.css导入main.js
```
...
import './main.css';
```

css模块化

配置css-loader

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

app下创建greeter.css， touch app/greeter.css

.root {
    background: #87d;
    color: limegreen;
}

将app/greeter.css导入Greeter.js

import config from './config.json';
import styles from './Greeter.css';            //引入css

var greeter = () => {
    let greet = document.createElement('div');
    greet.textContent = config.greetText;
    greet.className = styles.root;            //赋予className
    
    return greet;
}
export default greeter

安装使用postcss, autoprefixer

npm install --save-dev postcss-loader autoprefixer

在css module后添加postcss-loader

{
    test: /(\.css$)/,
    use: [
        ...
        {
            loader: 'postcss-loader'
        }
    ]
}

配置postcss.config.js

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

使用内置插件BannerPlugin

const webpack = require('webpack');
...

module.exports = {
    ...
    plugins: [
        new webpack.BannerPlugin('版权所有, 翻版必究')             //内置插件.....
    ]
}

安装使用HtmlWebpackPlugin插件

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

删除public文件夹，创建app/index.tpl.html文件touch app/index.tpl.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'></div>
  </body>
</html>

更新webpack.config.js

...
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ...
    output: {
        ...
        path: __dirname + '/build',
    },
    devServer: {
        ...
        contentBase: './build'
    },
    plugins: [
        ...
        new HtmlWebpackPlugin({
            template: __dirname + '/app/index.tpl.html'
        })
    ]
}

使用内置插件Hot Module Replacement

...
module.exports = {
    ...
    devServer: {
        ...
        hot: true
    },
    plugins: [
        ...
        new webpack.HotModuleReplacementPlugin()
    ]
}

安装使用mini-css-extract-plugin插件 (详细

npm install --save-dev mini-css-extract-plugin

替换style-loader

...
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

...
{
    loader: MiniCssExtractPlugin.loader
}

安装使用 clean-webpack-plugin插件 (详细

...
const CleanWebpackPlugin = require("clean-webpack-plugin");

  plugins: [
    ...
    new CleanWebpackPlugin('build/*.*', {
      root: __dirname,
      verbose: true,
      dry: false
    })
  ]

打包文件加入缓存

...
module.exports = {
    ...
    output: {
        ...
        filename: 'bundle-[hash].js'
    }
};

参考：

mac下webpack入门流程总结

猜你喜欢

热点阅读