搭配webpack前端开发环境

依赖软件下载

node-v10.13.0-x64.msi（官网下载即可，LTS）

安装webpack

安装完Node.js后，在项目目录下初始化，生成package.json文件

npm init -y

本地安装webpack和webpack-cli

npm install webpack webpack-cli --save-dev

执行webpack

npx webpack

或者

node_modules\.bin\webpack   # 反斜杠

或者

在脚本中配置

"scripts": {
    "build": "webpack"
}

npm run build  # 通过模块名引用本地安装的 npm 包

拆分配置文件webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

执行webpack，并且指定配置文件

webpack --config webpack.config.js

 

安装CSS加载

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

配置文件中加上

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

安装CSS单独打包插件

# webpack4的用法
npm install –-save-dev extract-text-webpack-plugin@next
# 新的插件，推荐用下面这种
npm install --save-dev mini-css-extract-plugin

修改配置文件

const ExtractTextPlugin = require("extract-text-webpack-plugin");

...
...
...

{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
     fallback: "style-loader",
     use: "css-loader"
  })
}

...
...
...

new ExtractTextPlugin("style.css"),

安装文件加载（图片和字体）

npm install --save-dev file-loader

配置文件中加上

module : {
    rules : [
        {
            test : /\.(png|svg|jpg|gif)$/,
            use : [
              'file-loader'
            ]
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: [
              'file-loader'
            ]
        }
    ]        
}

安装url-loader

npm install --save-dev url-loader

安装HTML的Loader

npm install --save-dev html-loader

在页面可以引入公共页面

<%= require('html-loader!./layout/header.html')  %>

安装HTML插件（用于更新页面中的资源引用）

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

配置文件中加上

plugins : [
    new HtmlWebpackPlugin({
      title : 'OutPut Management'
    })
]

安装md5

npm install --save-dev webpack-md5-hash

安装清理插件

npm install clean-webpack-plugin --save-dev

配置文件中加上

const CleanWebpackPlugin = require('clean-webpack-plugin');

plugins: [
     new CleanWebpackPlugin(['dist'])
]

配置Source Map

配置文件中加入

devtool: 'inline-source-map',

安装webpack-dev-server

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

在配置文件中加入

devServer: {
     contentBase: './dist'
}

在脚本中加入

"start": "webpack-dev-server --open"

通过脚本启动

npm start

（npm的常用可简写脚本，start、restart、test、stop）

使用淘宝镜像

--registry=https://registry.npm.taobao.org

 

转载于:https://my.oschina.net/u/3960535/blog/2961976