webpack打包

JS文件打包

一、新建空项目。

创建index.html，其中引入出口文件名

写正常的js文件：/app/greeter.js，并且export

module.exports = function() {  //导出
  var greet = document.createElement('div');
  greet.textContent = "welcome to use webpack!";
  greet.setAttribute('id','greet')
  return greet;
}

定义入口文件：/app/main.js，将我们写的一些代码模块(greeter.js)返回并插入到index.html中

const greeter = require('./greeter.js');  //导入
document.querySelector("#root").appendChild(greeter());

另外：在webpack打包的时候，可以在js文件中混用require和module.exports 。但是不能混用import 和module.exports；有import，用export { 变量名 }

二、生成package.json文件

npm init -y

三、安装webpack 

npm install webpack@xx -g  //全局
npm install webpack@xx --save-dev  //局部

webpack4版需要去额外安装webpack-cli

npm install webpack@4 --save-dev
npm install webpack@4 webpack-cli --save-dev

四、根目录创建webpack.config.js，并定义出口和入口

module.exports = {
    // webpack4需要添加这个配置，development为开发环境，production为生产环境
    mode: "development",
    entry:  __dirname + "/app/main.js", // 之前提到的唯一入口文件
    output: {
        path: __dirname + "/common", // 打包后的文件存放的地方
        filename: "bundle.js" // 出口文件名
        //filename: "[name].[hash:5].js" --->name:main;[hash:5]:随机生成5位hash串
    }
}

“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

五、在package.json中对scripts对象进行相关设置

{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
  }
  ...
}

六、设置后直接通过npm start就webpack打包成功

---

css文件打包

第一步 安装css-loader、style-loader

npm i css-loader style-loader

第二部 引入css

接上例 第一步 

正常定义css文件：/app/greeter.css

#greet{
    background:red;
}

在/app/greeter.js中引入：

import './Greeter.css'

（注意，import和module export可能报错，import和export一块使用）

同样定义/app/main.css并引入

//main.css
#root{
    background:red;
}

//main.js中引入main.css
import './style.css';

第三步 去webpack.config.js中配置

module.exports = {
  entry: ...,
  output: ...,
  module: {
    rules: [
        { 
            test: /\.css$/,
            exclude: /node_modules/,
            use: [ // 请注意这里对同一个文件引入多个loader的方法。
                {
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }
            ]
        }
    ]
  }
}

---

引入json

在app文件夹内定义json：/app/config.json

{
    "Text": "JSON JSON JSON JSON JSON JSON"
}

在某个js中引入即可（greeter.js/main.js都行）

var json =require('./app/config.json'); //json对象

 

---

vue文件打包

https://segmentfault.com/a/1190000016505920