使用webstrom，简单配置一个webpack打包项目

首先安装webstrom编辑器，其次安装nodejs已安装的可以直接往下看

先创建文件，之后安装全局webpack执行npm install -g webpack

npm install -g webpack

有些功能要安装在项目中的 执行npm install --save-dev webpack

npm install --save-dev webpack

弄好之后第一步先在项目文件中执行npm init 生成package.json文件，创建webpack.config.js配置文件（用以webpack的入口跟出口），并创建好src文件夹里创建main.js跟html

在package.js中的"scripts": 中添加 “dev”: “webpack-dev-server”

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },

所以执行npm install webpack -D

这时在dist中就没有bundle.js文件了，所以在html中的script标签引用的也没有用了，要引用新的bundle.js文件了，他和dist src等是平级的，所以是这样的，在html引入：

之后配置package.json和webpack.config.js文件

webpack.config.js

const path = require('path')   // nodejs的path模块，用以处理文件路径

module.exports = {
    devServer: {
        inline: true,
        port: 8080//设置默认端口
    },
    entry: path.join(__dirname,'./src/main.js'),//输入路径
    output: {
        path: path.join(__dirname,'./dist'),//输出的路径
        filename: "bundle.js"//输出的文件名
    },

}

执行 npm install webpack-cli -D和npm install webpack-dev-server -D和npm install node-sass -D

可先安装jq测试一下有没有打包成功，npm install jquery -D

在main.js中编写代码

const  $=require('jquery')//调动jq
$(function () {
    $('#a1').css('background','red');
})

执行npm start，即可在浏览器看效果啦

想要自动执行css等一下外部文件的看下面的文章
下一章

补充：nodejs里的path模块的join跟resolve方法的区别
例子：

resolve方法

console.log(path.resolve())      // returns /workspace/demo
console.log(path.resolve(''))     // returns /workspace/demo
console.log(path.resolve(__dirname)) // returns /workspace/demo
console.log(path.resolve('/img/books', '/net'))  // returns '/net'
console.log(path.resolve('img/books', '/net'))  // returns '/net'
console.log(path.resolve('img/books', './net'))  // returns '/workspace/demo/img/books/net'
console.log(path.resolve('/img/books', './net'))  // returns '/img/books/net'
console.log(path.resolve('/img/books', 'net'))   // returns '/img/books/net'
console.log(path.resolve('/img/books', '../net'))     // returns '/img/net'
console.log(path.resolve('src','/img/books', '../net'))  // returns '/img/net'
console.log(path.resolve('src','./img/books', '../net'))  // returns '/workspace/demo/src/img/net'
console.log(path.resolve('src','img/books', '../net'))   // returns '/workspace/demo/src/img/net'

说明：
/ 代表的是根目录；
./ 代表的是当前目录；
…/ 代表的是父级目录。

1. 从右到左，我们可以看到，如果路径以/开头，就不会再拼接左边的路径了，因为已经是根目录了，如果是以./开头或者没有符号，就会拼接左边的路径，如果是以 …/开头的，就拼接左边路径的父路径。
2. 如果没有传入 path 片段，或者path 片段长度为零（空字符），则path.resolve()会返回当前工作目录的绝对路径(相当于使用path.resolve(__dirname))

path.join()

path.join()方法使用平台特定的分隔符把全部给定的 path 片段连接到一起，并规范化生成的路径
例如：path.join('/img', 'book', 'net/abc', 'inter', '..'); // return /img/book/net/abc
先第一个参数跟第二个参数拼接，然后再跟第三个参数拼接，最后跟第四个参数拼接，就得到了/img/book/net/abc
前三个拼接是成这样子的/img/book/net/abc/inter，由于最后一个是’..‘是到上一层，所以是/img/book/net/abc