webpack项目配置

第一步
安装webpack 

npm init -y  初始化项目
npm install webpack webpack-cli webpack-dev-server --save-dev

安装依赖

1

三大件

webpack
webpack-cli
webpack-dev-server

2

处理js ->ES6 ES7 ES8 装饰器

babel-loader@7
babel-core
babel-preset-env

babel-plugin-transform-runtime

babel-plugin-transform-decorators
babel-plugin-transform-decorators-legacy

3

处理sass ->css ->style

sass-loader
node-sass
css-loader
style-loader

postcss-loader  autoprefixer //添加兼容性前缀

4

处理模板 ejs tpl

ejs-loader

5

处理HTML 插件

html-webpack-plugin


--save-dev  -D
安装在开发环境下

--save  -S
安装在生产环境下

第二步

创建文件

src/html,src/js/index.js

第三步

配置webpack.config.js

const path = require('path')
module.exports = {
    mode: 'production',//development production 模式
    entry: { //入口
        index: path.resolve(__dirname+'/src/js/index.js')
    },
    output: { //打包输出位置
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js',
    },
    devServer: { //启动本地服务器
        port: 8087,    //设置端口
        open: true,    //打开浏览器
        hot: true,      //热更新
        host: 'localhost',    //指定地址
    },

}

配置package.json

"scripts": {
    "dev": "webpack serve --config webpack.config.js --color", // npm run dev 启动项目
    "build": "webpack" //npm run build 打包
  },