笔记webpack

一、初始化项目结构：
mkdir webpackDemo // 创建项目
cd webpackDemo // 进入项目
mkdir app // 在项目中创建app文件
mkdir common // 在项目中创建common文件
cd app // 进入app文件夹
touch app.js // 创建app.js文件
touch main.js // 创建main.js文件
cd … //返回到webpackDemo项目根目录
cd common // 进入common文件
touch index.html // 创建index.html文件

备注:touch是linux系统下的命令，windows对应操作cd.>index.js

二、初始化项目package.json
npm init

三、安装webpack V4.12
最新版本号安装
npm install webpack -g // 全局安装
npm install webpack --save-dev // 项目内安装

固定版本号安装 (@xx版本号)
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

注意：package.json文件中不能有注释，在运行的时候请将注释删除

四、打包关键
module.exports = {
// webpack4需要添加这个配置，development为开发环境，production为生产环境
mode: “development”,
entry: __dirname + “/app/main.js”, // 之前提到的唯一入口文件
output: {
path: __dirname + “/common”, // 打包后的文件存放的地方
filename: “index.js” // 打包后输出文件的文件名
}
}

在主页面index.html中引入index.js用于浏览器解析
**index.js是common文件夹下的文件经webpack打包后最终生成的供浏览器解析的js文件，这个不需要手动进行配置，甚至你不需要新建它，由webpack自动生成，后续我们会讲解它；

五、webpack-dev-server来搭建本地开发服务器

——————————————————————————————————

一、初始化带有webpack和router的项目
vue init webpack 项目名

二、正式打包修改配置
npm run build

vue-cli 打包配置
1、配置项目引用文件问相对路径；
2、引用js文件路径错误；
3、图片路径错误；
4、背景图片路径错误；

解决以上问题，需修改三个地方：

1、config/index.js（大约46行）

build: {
    assetsPublicPath: './' // 修改为相对路径
}

2、build/utils.js（大约51行）

if(options.extract){
    return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../' // 此处解决css中背景图片路径报错
    })
}

3、build/webpack.prod.conf.js（大约25行）

output: {
    publicPath: './', // 添加这一行配置
}

三、路由模式配置
当路由模式为history(不显示#，默认为hash)时，如果上线的项目不在根目录下运行，则需要在router.js中配置base:‘项目路径’，如base: ‘/vue-1105/dist’；
此外，
404错误
在History mode下，如果直接通过地址栏访问路径，那么会出现404错误，这是因为这是单页应用（废话）…其实是因为调用了history.pushState API 所以所有的跳转之类的操作都是通过router来实现的，解决这个问题很简单，只需要在后台配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。具体配置如下：

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
  try_files $uri $uri/ /index.html;
}

Node.js (Express)