Multiple-page-boilerplate

KO | EN

gitlite — search

#javascript #react #golang #android #machine-learning #deep-learning #macos #nodejs #windows #kubernetes #awesome-list #pytorch #security #open-source

Multiple-page-boilerplate

(★ 14)

手撸webpack4.0配置 —— 快速搭建单页面及多页面开发脚手架

Multiple-page-boilerplate 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 手写一个webpack4.0配置 —— 快速搭建单页面及多页面开发

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm start
```

基本配置的详细说明在[webpack.config.js](https://github.com/mtonhuang/webpack/blob/master/webpack.config.js)中有介绍，请移步，不再赘述了。

以下是我在搭建模板demo时觉得需要注意的问题，记录沉淀下来。

### 解决Webpack4.0 打包警告问题
```
"scripts": {
         "start": " --mode development",
         "build": "--mode production"
     }
```
### 引用CSS文件
extract-text-webpack-plugin插件会将打包到js里的css文件进行一个拆分,打包的html页面就以link的方式去引入css了
```
    {
       test: /\.css$/,
       use: ExtractTextWebpackPlugin.extract({
           // 将css用link的方式引入就不再需要style-loader了
           use: 'css-loader'
       })
    },
    plugins: [
        // 拆分后会把css文件放到dist目录下的css/style.css
        new ExtractTextWebpackPlugin('css/style.css')
    ]
```

### 引用图片
处理图片方面，也需要loader,如果是在css文件里引入的如背景图之类的图片，就需要指定一下相对路径
```
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    use: 'css-loader',
                    publicPath: '../'   //在css中指定了publicPath路径这样就可以根据相对路径引用到图片资源了
                })
            },
            {
                test: /\.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,    // 小于8k的图片自动转成base64格式，并且不会存在实体图片
                            outputPath: 'images/'   // 图片打包后存放的目录
                        }
                    }
                ]
            }
        ]
    }
}
```

### 页面img引用图片
这样再打包后的html文件下img就可以正常引用图片路径了
```
module.exports = {
    module: {
        rules: [
            {
                test: /\.(htm|html)$/,
                use: 'html-withimg-loader'
            }
        ]
    }
}
```

### 热更新和自动刷新

```
// webpack.config.js
let webpack = require('webpack');

module.exports = {
    plugins: [
        // 热替换，热替换不是刷新
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: './dist',
        hot: true,
        port: 3000
    }
}

// 虽然配置了插件和开启了热更新，但并不会生效,需要在主要的js文件里写入下面这段代码
if (module.hot) {
    // 实现热更新
    module.hot.accept();
}
```

### 上传git忽略node_module等文件

在根目录新建.gitignore文件

```
.DS_Store
node_modules/
dist/
npm-debug.log

```

Multiple-page-boilerplate

Multiple-page-boilerplate 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Multiple-page-boilerplate

Multiple-page-boilerplate 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README