关注各种黑科技
B站UP主,编程教学,游戏玩家,挂B,金牛座

使用webpack打包前端工程1 项目初始化

之前用过webpack做ng的项目,已经忘的差不多了,当时还是wp2,现在都出webpack 4了。
参考官网教程 学习重新学习一遍
https://webpack.js.org/guides/

简单记录一下,去年还准备做webpack的视频,也没坚持,主要是太忙了。。
node -v
v8.9.3
npm -v
5.5.1

mkdir webpack-demo && cd webpack-demo

打包前 用script标签外部引入lodash
src/index.js

function component() {
  let element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

这种老式写法 顺序非常重要,页面多了依赖是个问题,以前的解决方法 https://requirejs.org/
现在用nodejs打包

开始打包

npm init -y
npm install webpack webpack-cli --save-dev

webpack-cli 是使用 webpack 的命令行工具 在 4.x 版本之后不再作为 webpack 的依赖

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  }
}

可以去除 "main": "index.js", 加上 "private": true,
main好像是用来讲本项目作为一个npm包发布用的,这里只是一个web项目,不用公开发布 用private

直接用script src引入js,会有各种依赖问题,所以用webpack打包,另外可以用requirejs

npm install --save lodash

src/index.js

 import _ from 'lodash';

  function component() {
    let element = document.createElement('div');


    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

用import导入,和python差不多,这种方式 浏览器不支持,所以还要打包

npx webpack

webpack不带参数 默认用src/index.js作为入口,生成dist/main.js
npx是 Node 8.2/npm 5.2.0 以后自带的一个命令,可以调用./node_modules/.bin/webpack
这样webpack就不用全局安装了

html 没有打包 手工添加
dist/index.html

  <!doctype html>
  <html>
   <head>
     <title>Getting Started</title>

   </head>
   <body>

<script src="main.js"></script>
   </body>
  </html>

最终产出的main.js 一推乱七八糟的压缩代码

用配置

webpack.config.js

const path = require('path');

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

npx webpack --config webpack.config.js

和默认的类似

在npm里加入build scripts命令入口
"build": "webpack"

npm run-script build 或npm run build 直接npm build 不行

npm start可以默认映射到scripts里

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
   "build": "webpack",
   "start": "webpack --config webpack.config.js"
  },

scripts里的命令 默认加了./node_modules/.bin/的环境变量,所以能直接用webpack命令

警告 暂时不管

WARNING in conf iguration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
转载请注明出处
分享到: 更多 (0)

评论 0