美文网首页
webpack命令

webpack命令

作者: 尤樊容 | 来源:发表于2018-05-11 11:25 被阅读24次

    1、安装nodeJs
    2、安装npm,升级用npm install -g npm,全局安装
    3、全局安装webpack, npm instsall -g webpack
    4、安装依赖项,npm install --save-dev webpack

    5、npm install webpack-cli -D

    6、npm install @babel/preset-env
    7、webpack app/main.js public/webpack.js

    20180329
    1、npm init
    2、npm install --save-dev webpack
    3、npm install --save lodash
    4、npm install webpack-cli -D
    5、npx webpack src/index.js --output dist/bundle.js
    6、mode选项可以在webpack.config.js里指定,也可以在webpack cli命令上指定:

    development:开发模式,webpack会默认配置常用于开发的参数,如输出运行时的错误信息等
    production:产品模式,webpack会默认配置常用语产品构建的餐宿,如压缩代码等

    配置文件:
    mode: 'development'
    mode: 'production'

    命令行:
    webpack --mode development
    webpack --mode production

    去掉警告

    7、增加webpack.config.js文件,添加入口出口文件
    8、添加npx webpack --config webpack.config.js
    9、添加
    "scripts": {
    "build": "webpack"
    },

    10、npm run build
    11、从 JavaScript 模块中 import 一个 CSS 文件,你需要在 module 配置中 安装并添加 style-loader 和 css-loader:

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

    12、npm install --save-dev file-loader
    13、处理背景和图标这些图片
    14、每次清空/dist文件 clean-webpack-plugin
    安装 npm install clean-webpack-plugin --save-dev
    15、source map module中添加:devtool: 'inline-source-map'
    16、webpack-dev-server 为你提供了一个简单的 web 服务器,并且能够实时重新加载
    安装 npm install --save-dev webpack-dev-server

    相关文章

      网友评论

          本文标题:webpack命令

          本文链接:https://www.haomeiwen.com/subject/qucfdftx.html